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

Question

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

Answer 1

在文档部分，您可以找到 Semantic UI form inline and Grouped fields 类似于 Twitter 的 form-horizontal 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

解决方案的第一部分，即 class="inline field" 如果标签具有不同的宽度则不起作用，标签也不是 right-aligned [=17] =] 例子。可以这样解决

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

但这很丑

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

How can I create a horizontal form in Semantic UI?

semantic-ui