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

如果标签具有不同的宽度，则解决方案的第一部分，即class =“inline field”不起作用，标签也不像引导程序示例中那样右对齐。人们可以像这样解决这个问题

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

但这太丑了。

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

2 个答案: