父容器为inline-block的导航栏

常见的水平导航栏实现方法有：

1、li {display:inline}

缺点：内联元素，无法设置长与宽

2、li {float:left}

缺点：需要清除浮动

3、li {display:inline-block}

缺点：每个inline-block之间有4px的空白

本文介绍的方法是：将父元素设置为inline-block，子元素浮动

<ul>

<li>abc</li>

<li>bcd</li>

<li>cde</li>

</ul>

1、首先父元素设置为inline-block，让父元素不会因为子元素浮动而不占空间

ul {

display:inline-block;

}

2、设置子元素浮动，但无需清除浮动

li {

float:left;

}

以上传达的一个观点是：父容器为inline-block，即使子元素浮动，父容器也会被撑起，不需要清除浮动。

父容器为inline-block的导航栏

原文：http://www.cnblogs.com/olafff/p/5122758.html