使用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. Android手机打造你的Python&Java开发工具！

    开发者桌面 之前写过一篇文章:将Android手机打造成你的python开发者桌面 在安卓手机上通过Termux软件,创建一个模拟Linux系统,它的好处就是无需root,即可在手机中编写Python ...

  2. Magicodes.Sms短信库的封装和集成

    简介 Magicodes.Sms是心莱团队封装的短信服务库,已提供Abp模块的封装. Nuget 新的包 名称 说明 Nuget Magicodes.Sms.Aliyun 阿里云短信库 Magicod ...

  3. 趁热来一波，WWDC 2016 iMessage App开发

    转自:http://www.jianshu.com/p/be79b8729bf8 WWDC 2016关于iMessage App的两个视频已经放出(iMessage Apps and Stickers ...

  4. ios 测试网络是否连接

    转自:http://blog.csdn.net/lwq421336220/article/details/16982857 - (BOOL) connectedToNetwork { //创建零地址, ...

  5. 移动开发在路上-- IOS移动开发系列 多线程一

    类似于什么是进程什么是线程在这里我就不多浪费时间了(Google一下什么都有)! 废话不多说先上图,我相信大家都是喜欢看图的人,俗话说得好,求图求真相吗?虽然这里只有屌丝一个但是真相还是会有的... ...

  6. 编译安装nginx时配置开机自启

    详细编译安装nginx请参考[Nginx目录结构与配置文件详解]以及[Nginx安装部署],在这里就进行简单安装 安装Nginx 环境介绍 操作系统: [root@localhost ~]# cat ...

  7. 2018ACM/ICPC 焦作网络预选赛-A Magic Mirror

    Jessie has a magic mirror. Every morning she will ask the mirror: 'Mirror mirror tell me, who is the ...

  8. python做单因素方差分析

    方差分析的主要功能就是验证两组样本,或者两组以上的样本均值是否有显著性差异,即均值是否一样. 这里有两个大点需要注意:①方差分析的原假设是:样本不存在显著性差异(即,均值完全相等):②两样本数据无交互 ...

  9. java_计算个人所得税

    // import java.util.Scanner;public class Test10{ public static void main(String[] args){ // 创建Scanne ...

  10. Vue中使用iconfont

    学习博客:https://www.imooc.com/article/33597?block_id=tuijian_wz