为什么当我添加宽度为CSS的列表，该列表成为垂直而非水平

<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：`为什么当我添加宽度为CSS的列表，该列表成为垂直而非水平

li{float: left; border:dotted; text-align: center; }`

当我没有把width属性，该元素的，b，C去horizontallaly 但为什么我把宽度后水平成为？我还以为只有宽度设置元素

来源

2012-11-29 dramasea

SRY但尝试的代码了，我是FRM马来西亚 – dramasea

使用http://jsfiddle.net/，这样我们就不必。 – ediblecode

的a，b，c列表项是pages列表项的儿童的宽度。您的CSS seletor li正在将100px宽度应用于页面上的所有列表项目，因此a,b,c列表项目将尊重其父项的宽度并落在新行中。

如果你只是想给a，b，c项目的宽度，然后使用不同的选择来排除父项，如：

ul li ul li { width:100px; }

来源

2012-11-29 15:57:33 MrCode

的问题是，你的<ul>没有足够的空间让<li>s水平扩展。 float: left将尽量保持所有<li> s在同一'行'，但如果没有空间，他们会下降。尝试添加该到ul {}风格：

width: 400px

来源

2012-11-29 15:58:46 Dori

为什么当我添加宽度为CSS的列表，该列表成为垂直而非水平

回答

相关问题