如何在语义UI中创建水平表单？

Question

我在Bootstrap中看到了水平示例（form-horizontal），但语义UI似乎只有标签位于输入上方的表单布局。

Answer 1

在文档部分，您可以找到Semantic UI form inline和Grouped fields，它与Twitter Bootstrap的表单水平类似。

要创建表单内的字段的一个新行，包裹内<div class="inline field"> </div>

/* Code added for presentation in SO snippet, ignore this CSS */ 
 

 
* > div, 
 
h1 { 
 
    margin-left: 20px !important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet" /> 
 
<h1>Single</h1> 
 
<div class="ui form"> 
 
    <div class="inline field"> 
 
    <label>Last name</label> 
 
    <input placeholder="Full Name" type="text"> 
 
    </div> 
 
    <div class="inline field"> 
 
    <label>Last name</label> 
 
    <input placeholder="Full Name" type="text"> 
 
    </div> 
 
</div> 
 

 
<h1>Grouped</h1> 
 

 
<div class="ui form"> 
 
    <div class="inline fields ui grid container centered"> 
 
    <label class="four wide column">Lengthy Phone numbers</label> 
 
    <div class="field four wide column"> 
 
     <input type="text" placeholder="(xxx)"> 
 
    </div> 
 
    <div class="four wide column field"> 
 
     <input type="text" placeholder="xxx"> 
 
    </div> 
 

 
    </div> 
 
    <div class="inline fields ui grid container centered"> 
 
    <label class="four wide column">Phone Number</label> 
 
    <div class="four wide column field"> 
 
     <input type="text" placeholder="(xxx)"> 
 
    </div> 
 
    <div class="field four wide column"> 
 
     <input type="text" placeholder="xxx"> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

溶液的第一部分，即类=“内嵌字段”不工作的元件如果标签具有不同的宽度，则标签也不像引导示例中那样右对齐。有人可能会解决这个问题这样

<div class="inline field"> 
    <label style="width:30%; text-align:right;">Last name</label> 
    <input placeholder="Full Name" type="text"> 
</div> 

但是，这是丑陋的。