<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. doc命令大全（详细版）

    doc命令大全(详细版) 1 echo 和 @回显命令@                        #关闭单行回显echo off                 #从下一行开始关闭回显@echo ...

  2. leetcode-38.报数

    leetcode-38.报数 题意 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作 ...

  3. 方向键控制圆球运动（简易）（js）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. MySQL 安装及卸载详细教程

    本文采用最新版MySQL8版本作为安装教程演示,本人亲试过程,准确无误.可供读者参考. 下载 官网下载 --> 社区免费服务版下载. 下载Windows安装程序MySQL Installer M ...

  5. UnrealEd3视图导航及常用快捷键

    本博客使用的版本:2010-08   [更多其他的UE3版本][tps所用版本: 2011-02]     [最新的UE3版本 -- 2015-02] [unreal engine wiki  中文w ...

  6. java----回文序列判断java

    import java.util.Scanner; public class test02 { public static void main(String[] args) { Scanner in ...

  7. 自动化测试基础篇--Selenium判断元素是够存在

    摘自https://www.cnblogs.com/sanzangTst/p/8376101.html selenium+python处于学习阶段,功能实现之后开始整理之前写的代码,突然发现一个功能没 ...

  8. C# 函数1 (函数的定义)

    1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 6 na ...

  9. Unknown initial character set index '255' received from server. Initial client character set can be

    mysql的连接错误,在网上查找到是编码不匹配的原因, 直接在连接的URL后加上?useUnicode=true&characterEncoding=utf8就可以了

  10. C# -- Lambda 表达式的使用

    C# -- Lambda 表达式的使用 Lambda 表达式是作为对象处理的代码块(表达式或语句块). 它可作为参数传递给方法,也可通过方法调用返回. Lambda 表达式是可以表示为委托的代码,或者 ...