css - 防止列数破坏元素的边界

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

虽然您的问题不是很清楚(没有标记)，但您的表单元素(label 和 input)似乎没有包装在各自的容器中并且是独立的。

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

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

示例:

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

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

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

编辑:

(在 Op 的评论之后)

现在您已经提供了标记，这种安排也应该有效。只要您确定所有 input 都正确包装在那些 label 中。

看这个片段:

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

还有这个 fiddle :http://jsfiddle.net/abhitalks/38wjpu28/3/

除了您在问题中显示的内容之外，您的标记中似乎还有其他内容。

注意 2:我建议使用包装 div 并将 label 和 input 分开。如果您以后需要更改布局，这将允许您更好地控制。 (例如，当您需要将 label 放在 input 之上而不是并排放置时)