html - 如何在表格单元格中让两个输入字段彼此相邻，每个输入字段的宽度为 50%？

Question

我有这个表:

<table>
  <tr>
    <td>
      <input type="text" class="half"/>
      <input type="text" class="half" />
    </td>
    <td>
      <input type="text"/>
    </td>
    <td>
      <input type="text"/>
    </td>
  </tr>
</table>

CSS:

table {
  width: 100%;
  border-spacing: 0;
}

.half {
   float: left;
   width: 50%;
}

如何让两个 input 字段彼此相邻，每个字段占表格单元格(自然/正常)宽度的 50%？

目前，这不起作用。包含类 half 的输入字段的表格单元格太宽了，我不明白为什么会这样。

Answer 1

你需要两件事: DEMO

1. 避免行内 block 元素之间的空白(然后您可以删除 float 属性)。
2. 将边框大小包含在宽度中。

首先，最简单的方法是从 html 代码中删除空白并这样写:

  <input ... /><input  ... />

其次，是切换到另一个盒子模型:

box-sizing:border-box;

在需要时添加供应商前缀。