0 
<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; }`

当我没有放宽度属性时，元素a，b，c是水平的，但是为什么在我放宽度之后它变成了水平的？我以为宽度只设置了元素的宽度

4

2 回答 2

0

, a,列表项是列表项的子b项。您的 CSS 选择器将 100px 宽度应用于页面上的所有列表项，因此, ,列表项尊重其父项的宽度并落在新行上。cpagesliabc

如果您只想给a, b,c项指定宽度，则使用不同的选择器排除父项，例如：

ul li ul li { width:100px; }
于 2012-11-29T15:57:33.110 回答
0

问题是，您<ul>没有足够的空间让<li>s 水平扩展。 float: left将尝试将所有<li>s 保持在同一“行”上，但如果没有空间，它们就会掉下来。尝试将其添加到ul {}样式中：

width: 400px

于 2012-11-29T15:58:46.380 回答