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％的宽度。这是一个示例代码。

＆＃13;

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

＆＃13;

如何通过CSS处理突破

3 个答案: