对齐表格行内的标签和输入

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大小重置），尽管属性vertical-align设置为baseline似乎很可疑。

Answer 1

这个小提琴有帮助吗？ http://jsfiddle.net/HujQN/1/

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

div {
    margin: 0;
    padding: 0;
}