html - 在表格行内对齐标签和输入

Question

一开始我遇到了一个简单的问题，但是我无法解决。我有一个表，表示一个包含多行的表单(在我的示例中有一个是为了简化)，有两列:第一列包含标签，第二列包含输入字段。

<table>
  <tr>
    <td class="labelcell">
      <div class="label">
        <label>Name</label>
      </div>
    </td>
    <td>
      <div class="control">
        <div class="input">
          <input type="text" value="John" />
        </div>
        <div class="more">+</div>
      </div>
    </td>
  </tr>
</table>

我的问题是标签文本和输入文本没有垂直对齐。这是重现我的问题的示例: http://jsfiddle.net/KBz8g/

标签太低。我不知道如何正确解决这个问题。我不想更改前两个 css 规则(从 meyer 和 box sizing 重置)，尽管属性 vertical-align 设置为 baseline 似乎值得怀疑。

Answer 1

这个 fiddle 有帮助吗？ http://jsfiddle.net/HujQN/1/

我只是重置了部分的填充和边距。

div {
    margin: 0;
    padding: 0;
}