0

使用している純粋なグリッドにガターを追加する必要があります。デフォルトでは、次の例のような通常の純粋なグリッド 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;
}

また、ブラウザのサポートについても心配する必要があります。それほどではありませんが、古いブラウザがそれらを正しく表示するなら素晴らしいことです。

私が持っているものと私が欲しいものの例

4

3 に答える 3

2

アップデート：

これを行うための非常に優れた方法を見つけましたが、これもはるかに簡単です。

/* 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 を引きます。最初と最後の pure-u-whatever からパディングをキャンセルします。

なぜこれが良いのですか？

pure-u-1-2 が 3 つ連続していても、パディングが不安定になることはないからです。

pure-g のすべての直接の子 div に左右のパディングを追加するだけです (仕様に従う場合は、pure-u-blah クラスである必要があります)。次に、最初のパディングの左パディングを削除し、最後のパディングの右パディングを削除します。

理想的には、マージンを使用して、背景スタイルも間隔を空けて配置したかったのですが、それを機能させることができませんでした. また、最初と最後の列は、ガターが 1 つ少ないため、中間の列よりもわずかに広くなります。

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

これにより、境界ルールのようにレイアウトを変更することなく、すべての周りにかすかな赤い境界線が追加されます。

このコードで列が垂直に積み重なる場合は、ボックスのサイズを確認してください。ピュアは奇妙にグリッドに設定しません。私はいつもこれを * に設定して、どこかの reset.css ファイルに入れています。

.pure-g > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
于 2016-03-14T18:05:18.320 に答える
0

Multi-Column Form の例のように、入力フィールドにクラスを追加できますか? http://purecss.io/forms/#multi-column-form-with-pure-grids

<input id="first-name" class="pure-u-23-24" type="text">
于 2015-06-16T05:10:48.123 に答える