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

Answer 2

当然，只是延长它。这是我出于自己的目的快速整理的内容-可能需要针对其他元素进行扩展：

.pure-form {
  .pure-horizontal-group {
    input:first-child, textarea:first-child {
      border-radius: 4px 0 0 4px;
      margin: 0 0 0 -2px;
    }

    input, textarea {
        display: inline-block;
        padding: 10px;
        margin: 0 -2px 0 0;
        border-radius: 0;
        position: relative;
    }

    input:last-child, textarea:last-child {
      border-radius: 0 4px 4px 0;
      margin: 0 0 0 -2px;
    }
  }
}