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

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

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

为什么这样更好？

因为如果您连续拥有三个 pure-u-1-2，您最终不会得到不稳定的填充。

---

只需在 pure-g 的所有直接子 div 上添加左右填充（如果您遵循规范，则必须是 pure-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

您可以像多列表单示例中那样向输入字段添加一个类吗？ http://purecss.io/forms/#multi-column-form-with-pure-grids

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

Answer 3

这对我有用：

.pure-g > div
{
    box-sizing: border-box;
}
.pure-g > div:first-child
{
    padding-right: 12pt;
}
.pure-g > div:last-child
{
    padding-left: 12pt;
}
.pure-g > div :not(:first-child):not(:last-child)
{
    padding: 0 12pt;
}