常见的水平导航栏实现方法有:
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,即使子元素浮动,父容器也会被撑起,不需要清除浮动。
时间: 2024-10-19 05:00:09