我有一个列表，每个<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>
*{ 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; }
应该做到这一点。
对于div，您只需要向左浮动，而li则需要清除。因此：
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
我看到这是一篇旧文章，但是如果有人遇到相同的问题，请考虑一下：
<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>无效。
未经检查以确保可以正常工作
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
我假设占据整个空间是指宽度为100％。我还要假设您不希望将样式应用于列表，这就是为什么我在此示例中将其删除的原因。这也是免费的。您无需清除任何内容，只要列表项具有宽度和溢出：隐藏的属性/值对即可。
ul,
li {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
overflow: hidden;
}
li div.a,
li div.b {
float: left;
}
li { width: 100%;}
.a { float: left;}
.b { float: left;}
li{width:100%;}
.a{}
.b{float: left;}
这应该根据我对CSS的了解而做