如何处理突破CSS

Question

我只想在一行中显示三个项目，在每三个项目之后，接下来的三个项目应该在下一行。我想在不更改 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>

Answer 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 标签的宽度，以防您添加了它们。

Answer 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;}

Answer 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>

如何处理突破CSS

How to handle breaks through CSS

css

line-breaks