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

Question

我看到 Bootstrap (form-horizo​​ntal) 中有水平示例，但语义 UI 似乎只有标签位于输入上方的表单布局。

Answer 1

在文档部分，您可以找到 Semantic UI form inline和 Grouped fields类似于 Twitter Bootstrap 的 form-horizo​​ntal。

要在表单中创建新的字段行，请将元素包装在 <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>