防止列数破坏元素的边界

Question

我正在使用column-count和-webkit-column-count创建布局,但我发现了一个多次出现的问题.

正如你从这张图片中看到的那样,Chrome 45(没有在FF中发生)打破了元素的边界,这非常奇怪且非常烦人.这有点突破发生的代码(但我不知道为什么它不会发生在这里,只有区别是字体,并且没有Mayers css重置):

body {
  line-height: 1.5;
}
form {
  -webkit-column-count: 2;
  column-count: 2;
}
label {
  display: block;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-top: 0.625em;
}
input {
  border: 1px solid green;
  border-radius: 4px;
  padding: 0.25em 0.5em;
}
label>span:first-child {
  width: 5em;
  display: inline-block;
}

<h2>CONFIG:</h2>
<form id="pop_values" action="" class="ng-pristine ng-valid">
  <label>
    <input type="checkbox">
    <span>Mobile</span>
  </label>
  <label>
    <input type="checkbox">
    <span>Animate</span>
  </label>
  <label>
    <span>Frecuency:</span>
    <input type="number">
  </label>
  <label>
    <span>Exclusions:</span>
    <input type="text">
  </label>
</form>

但它没有用.你能给予任何启示吗？

Answer 1

尽管您的问题不是很清楚（没有标记），但您的表单元素（labels 和inputs ）似乎没有包装在各自的容器中并且是独立的。

您仅防止labels 上的中断，因此inputs 不受该规则的约束。这就是您面临该问题的原因。

最好的解决方案是将您的label-input集合包装在它们自己的包含divs 中并应用于break-inside: avoid这些divs 。

例子：

* { box-sizing: border-box; }
form { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

form > div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; }

form label, form input { display: inline-block; margin: 4px 0px; }
form input[type=text] { width: 50%; }

<form>
    <div>
        <input id="chk1" type="checkbox" /><label for="chk1">Mobile</label>
    </div>
    <div>
        <input id="chk2" type="checkbox" /><label for="chk2">Animated</label>
    </div>
    <div>
        <label for="txt1">Input 1:</label><input id="txt1" type="text" />
    </div>
    <div>
        <label for="txt2">Input 2:</label><input id="txt2" type="text" />
    </div>
    <div>
        <label for="txt3">Input 3:</label><input id="txt3" type="text" />
    </div>
    <div>
        <label for="txt4">Input 4:</label><input id="txt4" type="text" />
    </div>
    <div>
        <label for="txt5">Input 5:</label><input id="txt5" type="text" />
    </div>
    <div>
        <label for="txt6">Input 6:</label><input id="txt6" type="text" />
    </div>
</form>

小提琴查看调整大小的效果：http://jsfiddle.net/abhitalks/jd7v0n8e/

input注意：上例中的最后一个样式规则是为了防止当可用空间小于默认宽度时 s溢出。

编辑：

（在 Op 评论之后）

现在您已经提供了标记，这种安排也应该有效。只要您确定所有inputs 都正确包装在这些labels 内即可。

看这个片段：

* { box-sizing: border-box; } 
form{
    -webkit-column-count: 2;
    column-count: 2;
}
label {
    display: block; margin: 2px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}
input {
    border: 1px solid green;
    width: 50%;
}

<form>
    <label>This: <input type="text" /></label>
    <label>This is long: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This is much longer than before: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This: <input type="text" /></label>
</form>

还有这个小提琴：http://jsfiddle.net/abhitalks/38wjpu28/3/

除了您在问题中显示的内容之外，您的标记中似乎还必须发生其他事情。

注 2：我建议使用包装纸div并将其label分开input。如果您以后需要更改布局，这将使您能够更好地控制。（例如，当您需要放在label顶部input而不是并排放置时）