<style>

ul{
width: 320px;
//给父元素添加这两个属性
font-size: 0px;
text-align: center/left;
}
li{
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;

//子元素添加这个属性
display: inline-block;
list-style: none;
background: forestgreen;
}

</style>

display:inline-block 来解决盒子高度不一样，造成的盒子浮动的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  5. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  6. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  7. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  10. display：block;inline;inline-block大总结

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

随机推荐

  1. Python-Django 第一个Django app

    第一个Django app   by:授客 QQ:1033553122 测试环境: Python版本:python-3.4.0.amd64 下载地址:https://www.python.org/do ...

  2. Kotlin入门(26)数据库ManagedSQLiteOpenHelper

    共享参数毕竟只能存储简单的键值对数据,如果需要存取更复杂的关系型数据,就要用到数据库SQLite了.尽管SQLite只是手机上的轻量级数据库,但它麻雀虽小.五脏俱全,与Oracle一样存在数据库的创建 ...

  3. Android Studio多渠道打包（二）

    虽然多渠道打包的方式有很多种,那么今天我要说的通过工具的形式进行多渠道打包 首先,打开Android studio,找到顶部Build,点开 选择红色部分,里面的编辑框可以帮助我们更快的熟悉Gradl ...

  4. 我的第一个远程代码库房：建立Github仓库 心得

    一直想有一个自己的代码库,搞了两天终于搞定了,把自己的代码上传到github的愿望终于实现了,虽然仅仅是个开始. 在搭建的过程中,吸收了些知识,记录在这里,以作为分享. Git 和 Github 的区 ...

  5. 从面向服务架构（SOA）学习：微服务时代应该借鉴的5条经验教训

    [编者按]本文作者为 Matt McLarty,通过介绍 SOA 的兴衰变化,总结了微服务应该借鉴的5条经验教训.文章系国内 ITOM 管理平台 OneAPM 编译呈现. SOA 的兴衰变化让我们更了 ...

  6. 简化OSI七层网络协议

    OSI层 功能 TCP/IP协议 设备 应用层 文件传输,电子邮件,文件服务,虚拟终端 TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet 表示层 数据格式化,代码转换,数据解密 会 ...

  7. js 实现动态时间

    <span id="timebox"></span>                   //承载时间的span $(function () { var o ...

  8. UNIX高级环境编程（14）文件IO - O_DIRECT和O_SYNC详解 < 海棠花溪 >

    春天来了,除了工作学习,大家也要注意锻炼身体,多出去运动运动.  上周末在元大都遗址公园海棠花溪拍的海棠花.   进入正题. O_DIRECT和O_SYNC是系统调用open的flag参数.通过指定o ...

  9. Python爬虫-01：爬虫的概念及分类

    目录 # 1. 为什么要爬虫? 2. 什么是爬虫? 3. 爬虫如何抓取网页数据? # 4. Python爬虫的优势? 5. 学习路线 6. 爬虫的分类 6.1 通用爬虫: 6.2 聚焦爬虫: # 1. ...

  10. Teradata的profile使用

    1.proflie优势 使用profile可以批量管理用户参数,尤其是在一批用户具有相同的参数配置时,十分便捷. 2.profile可配置用户参数 [Account id][Default datab ...