display属性共有4个值：

blcok：块级米素
inline-block：行内块级米素
inline：行内米素
none：隐藏米素，不占有空间

1.块级米素

常见的块级米素有div,p,ul,ol,li,h1~h6等
块级米素会默认占满父米素的宽度且独占一行

<div>
    <p>尽可能的占满父米素的宽度</p>
</div>

2.行内米素

常见的行内米素有span,img,a,input,button,textarea、select等，他的宽度完全由内容撑开，不能为其设置宽高。
除非父米素一行放满了，行内米素否则不会换行
行内米素受父米素的text-align的影响，父米素设置text-align：center，行内米素会居中显示
行内米素受父米素的white-space的影响，父米素设置white-space：nowrap，行内米素将不会换行

3.行内块级米素

行内块级米素可以像跨级米素一样设置宽高
行内块级米素若是不设置宽高的话，他的巨细默认由内容或者说子米素撑开。它的特征介于块级米素与行内米素之间
行内块级米素一样受父米素的text-align的影响，父米素可以设置父米素的text-align来决议他的对齐方式
行内块级米素素受父米素的white-space的影响，父米素设置white-space：nowrap，行内块级米素将不会换行

<div>
    <span>行内米素</span>
</div>
<div>
    <span>行内块级米素</span>
</div>

4.现实运用

在轮播图中，最外层的容器宽度是牢固的，且overflow:hidden
第二层容器ul的宽度则是它子米素的宽度之和，由于子米素的个数不确定，以是不能在css中设定确定的宽度值，通常我们都是行使js计算出它子米素的宽度之和再赋予ul米素，今天这个例子我们不用js，行使inline-block宽度由子米素撑开的特征,让ul的宽度由子米素撑开

设置ul的样式display:inline-block,同时为了让所有的li标签不换行，设置white-space: nowrap
为了能让ul的white-space: nowrap生效，li标签需要设置display:inline-block，要消除代码换行造成的距离，可以让父米素的字体巨细设置为0，,然后子米素内里再设置字体巨细即可

<div>
<ul>
    <li>inline-block</li>
    <li>inline-block</li>
    <li>inline-block</li>
    <li>inline-block</li>
</ul>
</div>

链接: http://www.fly63.com/article/detial/5452