表の行に入力の横にあるボタンを配置

Question

これは私のテーブルが今見えるものである

表：

私は入力テキストボックスの隣に並ぶ小さなXボタンを配置しようとしています。これまでのところ私のコードです。

<table class="table table-hover"> 
    <thead class="thead-inverse"> 
     <th>Clave</th> 
     <th>Razón social</th> 
     <th>Contacto 1</th> 
     <th>Contacto 2</th> 
     <th>Contacto 3</th> 
     <th></th> 
    </thead> 
    <tbody> 
     <td class="col-md-1"> 
      <input type="text" name="" class="form-control"/> 
     </td> 
     <td class="col-md-3"> 
      <input type="text" name="" class="form-control"/> 
     </td> 
     <td> 
      <input type="text" name="" class="form-control" disabled/> 
      <a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a> 
     </td> 
     <td> 
      <input type="text" name="" class="form-control" disabled/> 
      <a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a> 
     </td> 
     <td> 
      <input type="text" name="" class="form-control" disabled/> 
      <a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a> 
     </td> 
     <td> 
      <a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a> 
     </td> 
    </tbody> 
</table> 

Answer 1

あなたは

td .btn { 
 
    position: absolute; 
 
    margin-top: 7px; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 
td input { 
 
    float: left; 
 
} 
 
.spacer { 
 
    padding-left: 30px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table class="table table-hover"> 
 
    <thead class="thead-inverse"> 
 
     <th>Clave</th> 
 
     <th>Razón social</th> 
 
     <th>Contacto 1</th> 
 
     <th>Contacto 2</th> 
 
     <th>Contacto 3</th> 
 
     <th></th> 
 
    </thead> 
 
    <tbody> 
 
     <td class="col-md-1"> 
 
      <input type="text" name="" class="form-control"/> 
 
     </td> 
 
     <td class="col-md-3"> 
 
      <input type="text" name="" class="form-control"/> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="" class="form-control" disabled/> 
 
      <a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a> 
 
     </td> 
 
     <td class="spacer"> 
 
      <input type="text" name="" class="form-control" disabled/> 
 
      <a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a> 
 
     </td> 
 
     <td class="spacer"> 
 
      <input type="text" name="" class="form-control" disabled/> 
 
      <a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a> 
 
     </td> 
 
     <td class="spacer"> 
 
      <a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a> 
 
     </td> 
 
    </tbody> 
 
</table>

探しているものです

Answer 2

あなたが試してみました：

<td nowrap></td> 

をこのCSSのバージョンがあります：ここ

th { 
    white-space: nowrap; 
}