html - 使标签与下面的语义 UI 宽度相同

Question

如何像bootstrap一样让Label和输入框等宽，目前我的页面是这样的

<div class="three column row">
  <div class="left floated column">
    <div class="inline fields">
      <label style="width:128px;">Customer Code</label>
      <div class="ui input right icon">
        <i class="search icon"></i>
        <input type="text" id="CustomerCode" class="search" readonly name="card[number]" placeholder="">
      </div>
    </div>
    <div class="inline fields">
      <label style="width:128px;">Customer Name</label>
      <input type="text" name="card[number]" placeholder="">
    </div>
  </div>
  <div class="right floated column">
    <div class="inline fields">
      <label>Customer Name</label>
      <input type="text" name="card[number]" placeholder="">
    </div>
    <div class="inline fields">
      <label>Phone No</label>
      <input type="text" name="card[number]" placeholder="">
    </div>
  </div>
</div>

Answer 1

请试试这个。

<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 style="width:30%; text-align:right;">Last name Test</label>
  <input placeholder="Full Name" type="text">
  </div>
  <div class="inline field">
    <label style="width:30%; text-align:right;">Fast name Testing  </label>
    <input placeholder="Full Name" type="text">
  </div>
</div>