如何处理突破 CSS答案

【问题标题】：How to handle breaks through CSS如何处理突破 CSS
【发布时间】：2017-01-20 06:25:04
【问题描述】：

我希望在每三个项目之后的一行中只放置三个项目，接下来的三个项目应该放在下一行。我想在不更改 HTML 的情况下做到这一点我在Fiddle 中尝试了这种方法，想知道这是否是一种正确的方法，或者是否有任何其他方法可以仅通过 CSS 来处理它

br{display: none;} br:nth-child(3n+0) {display: block;} p{display: inline}

<div>
  <p><input type="checkbox" name="a" value="a">abc</p><br>
  <p><input type="checkbox" name="b" value="b">bcd</p><br>
  <p><input type="checkbox" name="c" value="c">cde</p><br>
  <p><input type="checkbox" name="d" value="d">def</p><br>
  <p><input type="checkbox" name="e" value="e">efg</p><br>
  <p><input type="checkbox" name="f" value="f">fgh</p><br>
  <p><input type="checkbox" name="g" value="g">ghi</p><br>
  <p><input type="checkbox" name="h" value="h">hij</p><br>
  <p><input type="checkbox" name="i" value="i">ijk</p><br>
  <p><input type="checkbox" name="j" value="j">jkl</p><br>
  <p><input type="checkbox" name="k" value="k">klm</p><br>
  <p><input type="checkbox" name="l" value="l">lmn</p><br>
  <p><input type="checkbox" name="m" value="m">mno</p><br>
  <p><input type="checkbox" name="n" value="n">nop</p><br>
  <p><input type="checkbox" name="o" value="o">opq</p><br>
</div>

【问题讨论】：

你应该在codereview.stackexchange.com问它
如果您必须保持相同的 HTML，而不添加任何类，那么是的，这是一个好方法。但是，如果您可以向父 div 添加一个类，那么您甚至不需要 br

标签： css line-breaks

【解决方案1】：

你可以在不添加任何中断标签的情况下使用浮点数：

<div>
  <p><input type="checkbox" name="a" value="a">abc</p>
  <p><input type="checkbox" name="b" value="b">bcd</p>
  <p><input type="checkbox" name="c" value="c">cde</p>
  <p><input type="checkbox" name="d" value="d">def</p>
  <p><input type="checkbox" name="e" value="e">efg</p>
  <p><input type="checkbox" name="f" value="f">fgh</p>
  <p><input type="checkbox" name="g" value="g">ghi</p>
  <p><input type="checkbox" name="h" value="h">hij</p>
  <p><input type="checkbox" name="i" value="i">ijk</p>
  <p><input type="checkbox" name="j" value="j">jkl</p>
  <p><input type="checkbox" name="k" value="k">klm</p>
  <p><input type="checkbox" name="l" value="l">lmn</p>
  <p><input type="checkbox" name="m" value="m">mno</p>
  <p><input type="checkbox" name="n" value="n">nop</p>
  <p><input type="checkbox" name="o" value="o">opq</p>
</div>

对于 CSS：

div{width: 100%; float: left;}
p{width: 33.33%; float: left;}

这正是我更喜欢的方式，而不是中断标签。

Fiddle

注意：您可以根据您的边距和内边距调整 p 标签的宽度，以防您添加了它们。

【讨论】：

您已更改 HTML。根据问题，HTML 不能更改。
是的，但我仍然喜欢去掉那些
标签，以防万一我不认为这是从后端预先生成的，所以他可以灵活地更改 html如果这样会产生干净的代码。
我同意。我已经问过他了。让我们看看他怎么说:)
但你最终投了反对票：|无论如何，如果这看起来是正确的就可以了:)
我们希望首先通过将 CSS 注入现有代码来实现输出，但删除
标签似乎是合乎逻辑的。

【解决方案2】：

在不更改 HTML 的情况下，我认为您所做的是正确的。

如果你想通过删除 br 来改变

 <div>
      <p><input type="checkbox" name="a" value="a">abc</p>
      <p><input type="checkbox" name="b" value="b">bcd</p>
      <p><input type="checkbox" name="c" value="c">cde</p>
      <p><input type="checkbox" name="d" value="d">def</p>
      <p><input type="checkbox" name="e" value="e">efg</p>
      <p><input type="checkbox" name="f" value="f">fgh</p>
      <p><input type="checkbox" name="g" value="g">ghi</p>
      <p><input type="checkbox" name="h" value="h">hij</p>
      <p><input type="checkbox" name="i" value="i">ijk</p>
    </div>

和css

div p {
  width: 30%;
}
p{float:left;}

【讨论】：

【解决方案3】：

给子元素增加 33% 的宽度。这是一个示例代码。

<html>
    <head>
        <style>
            br{display: none;} 
            br:nth-child(3n+0) {display: block;} 
            p{display: inline}
            div {
                width: 500px;
                float: left;
            }
            div p{
              width: 33%;
                float: left;
            }
        </style>
    </head>
    <body>
        <div>
          <p><input type="checkbox" name="a" value="a">abc</p><br>
          <p><input type="checkbox" name="b" value="b">bcd</p><br>
          <p><input type="checkbox" name="c" value="c">cde</p><br>
          <p><input type="checkbox" name="d" value="d">def</p><br>
          <p><input type="checkbox" name="e" value="e">efg</p><br>
          <p><input type="checkbox" name="f" value="f">fgh</p><br>
          <p><input type="checkbox" name="g" value="g">ghi</p><br>
          <p><input type="checkbox" name="h" value="h">hij</p><br>
          <p><input type="checkbox" name="i" value="i">ijk</p><br>
          <p><input type="checkbox" name="j" value="j">jkl</p><br>
          <p><input type="checkbox" name="k" value="k">klm</p><br>
          <p><input type="checkbox" name="l" value="l">lmn</p><br>
          <p><input type="checkbox" name="m" value="m">mno</p><br>
          <p><input type="checkbox" name="n" value="n">nop</p><br>
          <p><input type="checkbox" name="o" value="o">opq</p><br>
        </div>
    </body>
</html>

【讨论】：