行内の多くの入力の隣にボタンを配置する

Question

これは大きなテーブルの一部です。私は3つのフィールドを持っていて、それぞれのフィールドには削除ボタンが並んでいなければなりません。

CSSは最初のボタンだけを整列させ、他のボタンは同じ位置に配置しています。他の2つのボタンをフィールドの隣に配置するにはどうすればいいですか？

ありがとうございます！

td .btn.aligned { 
 
    position: absolute; 
 
    margin-top: 7px; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
td input { 
 
    float: left; 
 
    margin-bottom: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://use.fontawesome.com/a06b1c7829.js"></script> 
 

 
<table id="tablaProveedores" class="table table-hover"> 
 
    <thead class="thead-inverse"> 
 
    <th>Phone numbers</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="text" name="phone1_1" id="telefono1_1" class="form-control" disabled/> 
 
     <a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times"></span></a> 
 
     <input type="text" name="phone2_1" id="telefono2_1" class="form-control" disabled/> 
 
     <a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times"></span></a> 
 
     <input type="text" name="phone3_1" id="telefono3_1" class="form-control" disabled/> 
 
     <a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times"></span></a> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

<div>秒でそれらをラップします。ブートストラップフレームワークを持つクラス.rowを与えることで、必要なものすべてを処理できます。

td .btn.aligned { 
 
    position: absolute; 
 
    margin-top: 7px; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
td .lowered { 
 
    margin-top: 44px; 
 
} 
 

 
td input { 
 
    float: left; 
 
    margin-bottom: 10px; 
 
} 
 

 
.spacer { 
 
    padding-left: 30px !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://use.fontawesome.com/a06b1c7829.js"></script> 
 

 
<table id="tablaProveedores" class="table table-hover"> 
 
    <thead class="thead-inverse"> 
 
    <th>Phone numbers</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="row"> 
 
      <input type="text" name="phone1_1" id="telefono1_1" class="form-control" disabled/> 
 
      <a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times"> 
 
      </span> 
 
      </a> 
 
     </div> 
 
     <div class="row"> 
 
      <input type="text" name="phone2_1" id="telefono2_1" class="form-control" disabled/> 
 
      <a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times"> 
 
      </span> 
 
      </a> 
 
     </div> 
 
     <div class="row"> 
 
      <input type="text" name="phone3_1" id="telefono3_1" class="form-control" disabled/> 
 
      <a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times"> 
 
      </span> 
 
      </a> 
 
     </div> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

私は、これは少し少ないコードで実現を取得することができました。私は絶対配置を削除し、同じテーブルセル内にあるので、入力に最大幅を適用し、ボタンの代わりに左に浮動小数点を適用しました。 jsfiddle

td .btn.aligned { 
    margin-top: 7px; 
    float: left; 
    margin-left: 5px; 
} 

td input { 
    float: left; 
    margin-bottom: 10px; 
    max-width:80%; 
}