Question

我在每个<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>

Answer 1

 *{ 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; }

应该做的伎俩。

Answer 2

对于div，你只需要左边和li，你想要清楚。所以：

li
{
    clear: left;
}
.a
{
    float: left;
}
.b
{
    float: left;
}

Answer 3

我看到这是一篇旧帖子，但如果有人遇到同样的问题，请考虑一下：

<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>将不会验证。

Answer 4

如果不确认，这应该可行


LI { width: 100%; }
.a { float: left; }
.b { float: right; }

Answer 5

li { width: 100%;}
.a { float: left;}
.b { float: left;}

Answer 6

我假设整个空间你的意思是宽度为100％。我还假设您不希望样式应用于列表，这就是我在此示例中删除它的原因。这也是无黑客的。只要您的列表项具有宽度和溢出：隐藏属性/值对，您就不需要清除任何内容。

ul,
li {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    overflow: hidden;
}
li div.a,
li div.b {
    float: left;
}

Answer 7

li{width:100%;}
.a{}
.b{float: left;}

根据我对CSS的了解，这应该按照要求进行。

列表项中的浮动div

7 个答案: