Question

这是一张更大的桌子的一部分。我有三个字段，每个字段旁边都应该有一个删除按钮。

CSS我只有第一个按钮，其他按钮位于相同的位置。如何将其他两个按钮放在其字段旁边。

谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

将它们包裹在<div>中。使用引导框架为它们提供类.row将完成您所需的一切。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

我能够用更少的代码完成这项工作。我删除了绝对定位并将最大宽度应用于输入，并向左移动而不是向右移动按钮，因为它们位于同一个表格单元格中。
查看jsfiddle

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

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

对齐行内许多输入旁边的按钮

2 个答案: