<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. MySQL 慢查询日志配置与简析

    MySQL慢查询日志配置与简析 By:授客 QQ:1033553122   <1> 查看是否开启慢查询日志 SHOW VARIABLES LIKE 'slow%'; 说明: a. 如果sl ...

  2. ionic提示弹框

    //提示框 .factory('TipsPort', function ($ionicPopup) { var TipsPort = function (tipsText, SureFunction, ...

  3. Android开发学习之RecyclerView

    1.在app/build.gradle中添加RecyclerView依赖 implementation 'com.android.support:recyclerview-v7:28.0.0' 注意依 ...

  4. JAVA基础库的使用点滴

    Idea中双击SHIFT可以搜索[Eclipse中也有],这个很重要,可以找到当前的项目中可以引擎的已有的类,不要再次自己发明轮子 各种Util先在基础库和开源库中找 Base64编码 guava:c ...

  5. IT真的是万能的吗？

    朋友最近郁闷了,作为企业信息化主管的他最近经常听到的一句话就是:IT是万能的,不能拒绝用户的任何需求.这句话如果是普通用户私下开玩笑说说也就罢了,但现在演变成了老板在会议场合不止一次这么说,那就让人匪 ...

  6. java----八种排序算法

    1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数……直 ...

  7. MyBatis笔记----@Intercepts({@Signature(type = StatementHandler.class, method = "prepare", args = {Connection.class

    使用MyBatis 3.4.1或者其以上版本 @Intercepts({ @Signature(type = StatementHandler.class,  method = "prepa ...

  8. 修正Percona Monitoring Plugins for Zabbix的一处脚本Bug

    今天小试了一把Percona Monitoring Plugins for Zabbix模板,自己辛辛苦苦写的那一大堆Python脚本,貌似用这个模板全都覆盖到了.但是,我也发现最新的版本percon ...

  9. c/c++ 标准容器 forward_list resize 操作

    c/c++ 标准容器 forward_list, resize, 重新定位迭代器 1,forward_list特有的方法: insert_after emplace_after erase_after ...

  10. 利用python搭建Powersploit powershell脚本站点

    powershell脚本站点的搭建 一.Powersploit Powersploit是一款基于powershell的后渗透(Post-Exploitation)框架,集成大量渗透相关模块和功能. 下 ...