ラベルとテキストフィールドを同じ行に整列します。

Question

私は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

ブートストラップを使用しているようです。 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>

にこのコードを追加します。