Question

我有一个像下面的html，我有3个文本字段和标签。

<p class='field'>
  <%= form.label :points %>
  <%= form.text_field :coupon_code, :class => 'form-control payment-new' %>
  <%= button_tag "Apply", class: 'btn btn-lg btn-success primary payment-coupon payment-coupon-mobile ',id: 'apcode' %>
</p>


<p class='field'>
  <%= form.label :coupon_code %>
  <%= form.text_field :coupon_code, :class => 'form-control payment-new' %>
  <%= button_tag "Apply", class: 'btn btn-lg btn-success primary payment-coupon',id: 'apcode' %>
</p>
<p class='field'>

<%= form.label :gift_code %>
<%= form.text_field :gift_code, value: nil, :class => 'form-control payment-new' %>
<%= button_tag "Apply", class: 'btn btn-lg btn-success primary payment-code',id: '' %>
</p>

我希望标签首先出现，然后将文本字段放在同一位置（CSS）。

我的3个标签名称是

积分，优惠券代码和礼品代码。

我希望我的所有3个文本字段与我的标签位于同一个空格。

我无法理解。

以下是我正在使用的CSS。

 .payment-new{
    display: inline-block !important;
    width: 50% !important;
 }

 .payment-coupon{
    margin-top: -4px;
    font-size: 16px;
    border-radius: 4px;
    margin-left: 55px;
    padding: 5px;
    width: 200px;
    margin-bottom: -5px;
 }

 .payment-code{
    margin-top: -4px;
    font-size: 16px;
    border-radius: 4px;
    margin-left: 55px ;
    padding: 5px;
    width: 200px;
    margin-bottom: -5px;
 }

请让我知道我错过了什么。

Answer 1

看起来你正在使用Bootstrap。使用horizontal form。

Bootply

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Answer 2

将此代码添加到label

label{
    display: inline-block;
    width: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

示例代码段

.payment-new{
    display: inline-block !important;
    width: 50% !important;
 }

 .payment-coupon{
    margin-top: -4px;
    font-size: 16px;
    border-radius: 4px;
    margin-left: 55px;
    padding: 5px;
    width: 200px;
    margin-bottom: -5px;
 }

 .payment-code{
    margin-top: -4px;
    font-size: 16px;
    border-radius: 4px;
    margin-left: 55px ;
    padding: 5px;
    width: 200px;
    margin-bottom: -5px;
 }
 label{
    display: inline-block;
    width: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
 }

<p class='field'>
  <label>Label 1</label>
  <input type="text">
  <button>Button 1</button>
</p>


<p class='field'>
  <label>Another Label</label>
  <input type="text">
  <button>Button 2</button>
</p>

将标签和文本字段对齐在同一行导轨中

2 个答案: