<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. LockSupport的源码实现原理以及应用

    一.为什么使用LockSupport类 如果只是LockSupport在使用起来比Object的wait/notify简单, 那还真没必要专门讲解下LockSupport.最主要的是灵活性. 上边的例 ...

  2. Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法（不需要FQ）

    本文系博主原创,未经许可不得转载.如未经本人同意,私自转载或盗取资源提供下载,本人保留追究其法律责任的权利. 调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具 ...

  3. java后台打开浏览器代码

    import java.awt.Desktop; import java.io.IOException; import java.net.URI; import java.net.URISyntaxE ...

  4. abseil初体验[google开源的C++库]

    Google公开了其项目内部使用的一系列C++库,具体介绍参考: http://www.infoq.com/cn/news/2017/10/abseil?utm_source=infoq&ut ...

  5. 《node.js权威指南》读书笔记

    第一章 node.js介绍 非阻塞型I/O机制 当在访问数据库取得搜索结果的时候,在开始访问数据库之后,数据库返回结果之前,存在一段等待时间. 在传统的单线程处理机制中,在执行了访问数据库的代码之后, ...

  6. Scala实现树形结构

    package graphx import java.util.ArrayList import java.util.List /** * Created by zhen on 2018/12/28. ...

  7. 网络互联技术（2）——前篇—【转载】电脑结构和CPU、内存、硬盘三者之间的关系

    原文链接:传送门 详细内容: 电脑结构和CPU.内存.硬盘三者之间的关系 前面提到了,电脑之父——冯·诺伊曼提出了计算机的五大部件:输入设备.输出设备.存储器.运算器和控制器. 我们看一下现在我们电脑 ...

  8. Greenplum启动失败Error occurred: non-zero rc: 1的修复

    某日开发反馈测试环境的集群启动失败 报错内容如下: [gpadmin@hadoop-test2:/root]$ gpstart :::: gpstart:hadoop-test2:gpadmin-[I ...

  9. PostgreSQL 表值函数

    方法1create type deptSon as ( mid ), id ), name ), DeptParentId ) ); CREATE OR REPLACE FUNCTION functi ...

  10. python函数的用法

    python函数的用法 目录: 1.定义.使用函数 1.函数定义:def 2.函数调用:例:myprint() 3.函数可以当作一个值赋值给一个变量 例:a=myprint()    a() 4.写r ...