所以我的HTML是这样的：
<div id="background">
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
而我的CSS是这样的：
#background {
min-widh: 960px;
}
#navigation {
min-width: 960px;
}
#navigation ul {
min-width: 960px;
}
#navigation ul li {
display: inline;
width: 100px;
height: 50px;
background-color: red;
}
现在，这确实会创建一个内联栏，除了无论我如何更改
#navigation ul li
背景颜色（红色）仅严格围绕字母排列，仅此而已。无论我将其更改为多少，实际li的宽度和高度似乎都没有改变。知道为什么要这么做吗？
使用display:inline-block或代替display:inline。
#navigation ul li {
display: inline-block;
}
另外，您也可以使元素浮动以产生类似的效果：
#navigation ul li {
float:left;
}
除了上述两种解决方案之外，如果要使用display:inline，也可以只添加填充，而不是尝试设置高度/宽度。
#navigation ul li {
display:inline;
padding:20px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句