Question

我有table：

<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

避免内联块元素之间的空格（您可以删除float属性）。
将边框大小包含在宽度中。

首先，最简单的方法是从html代码中删除空白区域并将其写入：

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

其次，是切换到另一个盒子型号：

box-sizing:border-box;

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

Answer 2

如何将.half应用于<td>家长？

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

Answer 3

怎么样：

<table border="2px">
  <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;

}
td{
padding-left: 5px;

}

.half {
   float: left;
   width: 49%;
   margin: 2px;
}

Answer 4

解决此问题的快速方法，然后在span标记中包含输入。将范围设置为内联块50％，输入设置为100％。使用框模型维护td

中的输入

   http://jsfiddle.net/HgxFf/
 <table>
 <tr>
    <td>
        <span><input type="text" class="half"/></span>
        <span><input type="text" class="half" /></span>
    </td>
    <td>
      <input type="text"/><input type="text"/>
    </td>
    <td>
        <span><input type="text"/></span>
    </td>
  </tr>
</table>

CSS

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

td{border:1px solid #000000;font-size:0px; }

span{
    display:inline-block;
    width:50%;
    padding:0px
}

.half {
   width: 100%;
}

input[type="text"]{
    box-sizing:border-box;
}
}

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

4 个答案: