浮div在列表中的项目

StackOverflow https://stackoverflow.com/questions/93625

  •  01-07-2019
  •  | 
  •  

题

我有一个列表中的两个 <div>s在每 <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
{
    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>

你可以使用 跨度 而不是的 div

得到一个 div 除了其他或水平你必须要用暴力。css 但是如果您使用 跨度 它自然会.复制和粘贴到下列中的代码 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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top