Как создать горизонтальный сгруппированный вход с.pure-group в purecss?

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