Question

div （float left）横向列表问题

css代码

body{background-color:#FF0000;font:12px serif; line-height:20px; letter-spacing:5px;}
img{border:none;}

#no1{width:100%; margin:0;}

#no2{width:100%; margin:0;float:left}
#no2-1{width:201px; height:78px;margin:0;padding:10px 30px;}

#no2-2{width:500px;margin:0;}
#no2-2 ul{float:left;list-style:none;margin:0px;}
#no2-2 ul li{display:block;line-height:30px;margin:0 10px}

heml代码
<div id="no1">
<div id="no2">
<div id="no2-1"><img src="logo.gif" />
</div>
<div id="no2-2">
<ul>
<li>love1</li>
<li>love1</li>
<li>love1</li>
<li>love1</li>
<li>love1</li>
</ul>
</div>
</div>
<div id="no3">www
</div>
<div id="no4">sss
</div>
<div id="no5">aaa
</div>
</div>
我想div和div之间横向排， <div id="no2">
<div id="no2-1"><img src="logo.gif" />
</div>
<div id="no2-2">
<ul>
<li>love1</li>
<li>love1</li>
<li>love1</li>
<li>love1</li>
<li>love1</li>
</ul>
</div>
也就是这2个DIV， 字是横向出来了， 但是在LOGO的下边， 我想再LOGO的右边出来菜单
我在CSS 套这个两个的大DIV里加了#no2{width:100%; margin:0;float:left}
这个 为什么不行呢？float:left 这个代码不是横向排吗？

楼下高手们回答一些好吗

Answer 1

并不是你的描述不太清除，只不过楼上的朋友应该没运行你的代码。

这个问题是因为你的float放错位置了
#no2-1里面是logo #no2-2是ul
你要这两个DIV横向排列就应该把float:left;放在#no2-1和#no2-2里面。而你放到最外面的DIV了，当然会不起作用。
而且底下还得清除浮动，这样才标准：

<style>
body{background-color:#FF0000;font:12px serif; line-height:20px; letter-spacing:5px;}
img{border:none;}

#no1{width:100%; margin:0; border:1px solid #000000;}

#no2{width:100%; margin:0;}
#no2-1{width:201px; height:78px;margin:0; padding:10px 30px;float:left}

#no2-2{width:500px;margin:0;float:left}
#no2-2 ul{float:left;list-style:none;margin:0px;}
#no2-2 ul li{display:block;line-height:30px;margin:0 10px}
</style>

<div id="no1">
<div id="no2">
<div id="no2-1"><img src="logo.gif" /></div>
<div id="no2-2">
<ul>
<li>love1</li>
<li>love1</li>
<li>love1</li>
<li>love1</li>
<li>love1</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<div id="no3">www
</div>
<div id="no4">sss
</div>
<div id="no5">aaa
</div>
</div>

Answer 2

问题描述不太清楚，暂且如下回答：

如果是想让 li 列表横排，那么你应该把float:left写在

#no2-2 ul li

这里，

即：

#no2-2 ul{list-style:none;margin:0px;}
#no2-2 ul li{float:left;line-height:30px;margin:0 10px}

Answer 3

修改下#no2-2 ul li
#no2-2 ul li{display:block;float:left; width:80px;line-height:30px;margin:0 10px}

Answer 4

并不是你的描述不太清除，只不过楼上的朋友应该没运行你的代码。
这个问题是因为你的float放错位置了
#no2-1里面是logo
#no2-2是ul
你要这两个DIV横向排列就应该把float:left;放在#no2-1和#no2-2里面。而你放到最外面的DIV了，当然会不起作用。
而且底下还得清除浮动，这样才标准：
<style>
body{background-color:#FF0000;font:12px
serif;
line-height:20px;
letter-spacing:5px;}
img{border:none;}
#no1{width:100%;
margin:0;
border:1px
solid
#000000;}
#no2{width:100%;
margin:0;}
#no2-1{width:201px;
height:78px;margin:0;
padding:10px
30px;float:left}
#no2-2{width:500px;margin:0;float:left}
#no2-2
ul{float:left;list-style:none;margin:0px;}
#no2-2
ul
li{display:block;line-height:30px;margin:0
10px}
</style>
<div
id="no1">
<div
id="no2">
<div
id="no2-1"><img
src="logo.gif"
/></div>
<div
id="no2-2">
<ul>
<li>love1</li>
<li>love1</li>
<li>love1</li>
<li>love1</li>
<li>love1</li>
</ul>
</div>
<div
style="clear:both;"></div>
</div>
<div
id="no3">www
</div>
<div
id="no4">sss
</div>
<div
id="no5">aaa
</div>
</div>