防止列数破坏元素的边界

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>

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

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

编辑：

（在 Op 的评论之后）

既然您已经提供了标记，那么这种安排也应该有效。只要您确定所有inputs 都正确包裹在labels 中。

看到这个sn-p：

* { 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 之上而不是并排时）