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