yui-pure-css - purecss で .pure-group を使用して水平グループ化された入力を作成する方法は?

Question

http://purecss.io/forms/の「グループ化された入力」セクションから、垂直/積み重ねられたグループ化された入力のみが表示されますが、水平のものを作成することは可能ですか?

Answer 1

複数列フォームの例を使用できますが、次のように入力フィールドのクラスを pure-u-1 に設定します。

<form class="pure-form pure-form-stacked">
    <fieldset>
        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <input id="Username" class="pure-u-1" type="text" placeholder="Username">
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <input id="Password" class="pure-u-1" type="text" placeholder="password">
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <input id="email" class="pure-u-1" type="email" required placeholder="email">
            </div>
        </div>
        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox">I've read the terms and conditions</label>
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>

JSFiddle