提问人：Raanan Avidor 提问时间：9/18/2008 最后编辑：AwaisRaanan Avidor 更新时间：10/22/2019 访问量：4589
列表项中的浮动 div （ul， li）
Floating div's in list items (ul, li)
问：
我有一个列表，每个列表都有两个，我想将它们一个接一个地浮动，并且我希望占据整个可用空间。我该怎么做？<div><li><li>
<html>
<head>
<title></title>
<style type="text/css">
body {
}
ul {
}
li {
}
.a {
}
.b {
}
</style>
</head>
<body>
<ul>
<li>
<div class="a">
content
</div>
<div class="b">
content
</div>
</li>
</ul>
</body>
</html>
答：
-1赞
workmad3
9/18/2008
#1
li{width:100%;}
.a{}
.b{float: left;}
根据我对CSS的了解，这应该按照要求进行
0赞
anon
9/18/2008
#2
如果不检查以确保，这应该有效
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
4赞
Kent Fredric
9/18/2008
#3
*{ margin: 0; padding: 0;}
li{ width: 100%: display: block; }
li:after{ clear: both; }
div.a{ width: 49%; float: left; }
div.b{ width: 49%; float: left; }
应该可以解决问题。
2赞
AdamB
9/18/2008
#4
对于 divs，你只需要向左浮动，而 li，你想做一个清除。所以：
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
评论
0赞
roborourke
1/26/2009
您必须在浮动元素上指定宽度，否则您将无法获得所追求的 2 列效果。49.9%的人应该这样做。
0赞
Mike Becatti
9/18/2008
#5
li { width: 100%;}
.a { float: left;}
.b { float: left;}
0赞
user4903
9/19/2008
#6
我假设取整个空间，你的意思是 100% 的宽度。我还假设您不希望将样式应用于列表，这就是我在此示例中删除它的原因。这也是无黑客攻击的。只要列表项具有宽度和 overflow： hidden 属性/值对，就不需要清除任何内容。
ul,
li {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
overflow: hidden;
}
li div.a,
li div.b {
float: left;
}
1赞
Labanino
1/25/2013
#7
我看到这是一篇旧帖子，但如果有人遇到同样的问题，请考虑一下：
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
您可以使用 span 代替 div
要获得一个 div 除了另一个之外或水平方向，您必须使用 .CSS，但如果你使用 span，它自然会。将以下代码复制并粘贴到 html 中，看看我在说什么：
<ul>
<li>
<div style="background-color:red">red</div>
<div style="background-color:blue">blue</div>
</li>
<li>
<span style="background-color:red">red</span>
<span style="background-color:blue">blue</span>
</li>
</ul>
此外，至少对于 Microsoft 来说不会验证。<li><div></div></li>
评论