如何将排水沟添加到纯网格中

Question

我需要在我使用的纯网格中添加装订线。 因为我在默认情况下需要它，它应该只是像这个例子那样的常规纯网格css：

<div class="pure-g">
    <div class="pure-u-1-2">
        <label for="username">username</label>
        <input id="username" />
    </div>
    <div class="pure-u-1-2">
        <label for="password">password</label>
        <input type="password" id="password" />
    </div>
</div>

到目前为止我尝试了什么：

[class^="pure-u-"] {
    margin-right: 24pt;
    padding-right:12pt;
}

[class^="pure-u-"]:last-of-type {
    margin:0;
    padding:0;
}

我也尝试了box-sizing，但它也没有用：

[class^="pure-u-"] {
    box-sizing: border-box;
    margin-right:12pt;
}

我还要担心浏览器支持。不是很好，但如果旧浏览器显示正确，那就太棒了。

---

Answer 1

更新

我发现了一种更好的方法来做到这一点，这也更容易。

/* Add a gutter to Pure's Columns */
.pure-g {
  margin: 0 -1em;
}

.pure-g > div {
  padding: 0 1em;
}

那就是它。从下到上更容易阅读：在pure-g div的所有div子项的左侧和右侧添加1em的间距。然后在pure-g容器上，从左侧和右侧减去1em。从第一个和最后一个纯粹的u取消填充。

为什么这样更好？

因为你连续三次使用纯u-1-2，所以你最终不会得到难以填充的填充物。

只需在pure-g的所有直接子div上添加左右填充（如果遵循规范，则必须是纯u-blah类）。然后删除第一个上的左边距，最后一个边上的右边边距。

理想情况下，我已经使用了保证金，因此背景样式也会间隔开，但我无法正常工作。第一列和最后一列比任何中间列略宽，因为它们的沟槽少了一个。

.pure-g > div {
  padding: 0 1em;
}

.pure-g > div:first-child {
  padding-left: 0;
}

.pure-g > div:last-child {
  padding-right: 0;
}

对此类布局进行故障排除的一个好建议是在CSS中添加以下行：

* { box-shadow: 0 0 1px red; }

这将在所有内容周围添加一个微弱的红色边框，而不像边框规则那样改变布局。

如果列与此代码垂直堆叠，请检查您的盒子大小。 Pure并没有奇怪地为网格设置它。我总是在某个地方的reset.css文件中设置*。

.pure-g > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 2

您可以在输入字段中添加类，例如Mulit-Column Form示例吗？ http://purecss.io/forms/#multi-column-form-with-pure-grids

<input id="first-name" class="pure-u-23-24" type="text">

Answer 3

这对我有用：

<merge>