如何在purecss中使用.pure-group創建一個水平分組輸入？

Question

從http://purecss.io/forms/關於「分組輸入」部分，它只顯示垂直/堆疊分組輸入，但可以製作水平分組輸入嗎？

Answer 1

您可以使用multi-column form example但是類輸入字段設置爲純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; 
    } 
    } 
}