父容器为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，即使子元素浮动，父容器也会被撑起，不需要清除浮动。