<html>
<head>
<style type="text/css">
ul {list-style:none; margin:0; padding:0; }
li{float: left; border:dotted; text-align: center; width: 100px;}
</style>
</head>
<body>
<ul>
<li>home</li>
<li id="up">pages
<ul class="down">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</body>
</html>
这是我的代码，在 css 中:`
li{float: left; border:dotted; text-align: center; }`
当我没有设置 width 属性时，元素 a、b、c 会水平放置 但是为什么我输入width后它变成水平的了？我以为width只是设置元素的宽度
最佳答案
a、b、c 列表项是 pages 列表项的子项。您的 CSS 选择器 li 将 100px 宽度应用于页面上的所有列表项，因此 a、b、c 列表项遵循其父项的宽度并落在新行上。
如果您只想给 a、b、c 项一个宽度，那么使用不同的选择器来排除父项，比如:
ul li ul li { width:100px; }
关于html - 为什么当我将宽度添加到 css 列表时，列表变成垂直而不是水平，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13629527/