使用ul和li进行浮动布局（自适应）

1 图片上下两排：
首先盒子的宽度要给100%

ul包裹一个div，首先量好盒子的宽和高，并进行设置， margin 0 auto 盒子居中显示

每个li向左浮动，如果有间隔给一个margin-right即可，使用伪类选择器 nth-child来将不需要margin的元素选择出来并

去除相应的属性（如nth-child(n+4) 可以选中第4个到最后的li）

使用ul和li进行图片的布局的更多相关文章

  1. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  2. CSS中的ul与li样式详解 list-type

    转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...

  3. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  4. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  5. 如何去掉ul和li前面的小黑点

    做网站的时候经常会遇到如上图所示的小圆点,难看不说,还容易影响布局,下面就介绍几种消除小圆点的方法: 1. 找到相关CSS文件,在.ul 和.li 部分添加: 1 list-style: none; ...

  6. UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  7. ul、li模仿ios的TableView实现城市选择

    最近项目一个接着一个,之前说的精创环的项目还没做完,今天说先把那个放一下,先做访客系统,销售会见客户之后可以对客户进行一个跟踪记录,原型图也给了,今日头条的频道自定义页面一样. 如果是在IOS上让我来 ...

  8. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

  9. css li 不换行（布局，内容）

    参考这里 ------ 不换行的策略: 不换行原理: ul 和 li 默认都是 display:block; 的标签, 可以通过2种方式实现 li 的 不换行显示: * 将 li 设为 display ...

随机推荐

  1. 简单易懂的ftp脚本自动登录教程

    我在上上篇<nmon脚本--对Linux服务器的监控>的脚本中,使用了ftp的自动登录.结果有人询问,遂决定专门写一篇简单易懂的博客,来说明如何解决ftp的自动登录问题. 一.Window ...

  2. nitacm20301 poor math

    题目:给你一个n(1<=n<=1,000,000,000,000 ),找到满足1/n=1/a+1/b(0<a<=b)的数量. 题目链接:https://www.nitacm.c ...

  3. python学习笔记-生成随机数

    更多大数据分析.建模等内容请关注公众号<bigdatamodeling> 在实现算法时经常会用到随机数,有时会忘记各种随机数的生成方法,这里对Python中的随机数生成方法进行汇总,以供以 ...

  4. python输出日志到文件（每天一个日志）

    import logging from logging.handlers import TimedRotatingFileHandler logger = logging.getLogger('sim ...

  5. Java多态之动态绑定

    目录 Java多态之动态绑定 引用变量的类型 编译时类型 运行时类型 方法绑定 静态绑定 动态绑定 方法表 Java多态之动态绑定 上篇回顾:多态是面向对象程序设计非常重要的特性,它让程序拥有 更好的 ...

  6. rails 各种分组统计查询

    SpecialGroup.group(:special_type).countselect special_type,count(*) from special_groups group by spe ...

  7. 【Java Web开发学习】Spring加载外部properties配置文件

    [Java Web开发学习]Spring加载外部properties配置文件 转载:https://www.cnblogs.com/yangchongxing/p/9136505.html 1.声明属 ...

  8. hdu 6308 Time Zone （模拟+字符串处理）

    Time Zone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  9. create-react-app 超级慢的解决方法

    create-react-app超级慢的解决方法 在操作官方实例Create React App时,需要执行指令: create-react-app my-app 来创建一个新的React应用.由于某 ...

  10. 使用node+express+mongodb实现用户注册、登录和验证功能

    无论是手机端还是pc端,几乎都包含登录注册方面功能,今天就使用node+express+mongodb实现一套登录注册功能,这里需要自己去安装MongoDB环境,如果没有安装可以看这篇关于MongoD ...