更新

Question

在以下HTML中（也在jsfiddle中）我使用CSS表来对齐表单中的字段：

<!doctype html>
<html>
  <head>
    <style>
     form {
       display: table;
       width: 200px;
     }
     form>div {
       display: table-row;
     }
     form>div>label {
       display: table-cell;
       padding-right: 10px;
       text-align: right;
       vertical-align: middle;
     }
     form>div>input, form>div>textarea {
       display: table-cell;
       }     
    </style>
  </head>
  <body>
    <form>
      <div>
        <label for='form-name'>Name:</label>
        <input id='form-name' type='text'/>
      </div>
      <div>
        <label for='form-email'>Email:</label>
        <input id='form-email' type='email'/>
      </div>
      <div>
        <label for='form-comments'>Comments:</label>
        <textarea id='form-comments'></textarea>
      </div>            
      <div>
        <input type='submit'/>
        <input type='reset'/>
      </div>
    </form>
  </body>
</html>

我的问题是：

为什么textarea细胞的宽度大于其上方细胞的宽度？
为什么两个按钮输入字段不在同一行？

更新

根据接受的答案，这是一个更新的jsfiddle。

Answer 1

将width: 100%;提交给form>div>input, form>div>textarea并跟随css：

input[type="submit"], input[type="reset"] {
    display: inline-block;
    width: 48%;
}

将根据您的预期输出进行。

<强> Working Fiddle

Answer 2

所有4 div在您的小提琴中都有相同的宽度。
在提交和重置输入上使用float，以在同一行显示它们

Answer 3

附上一个片段。

＆＃13;

<!doctype html>
<html>

<head>
  <style>
    form {
      display: table;
      width: 200px;
    }
    
    form>div {
      display: table-row;
    }
    
    form>div>label {
      display: table-cell;
      padding-right: 10px;
      text-align: right;
      vertical-align: middle;
    }
    
    form>div>div {
      display: table-cell;
    }
    
    form>div>div>input {
      width: 100%;
    }
    
    form>div>div>textarea {
      width: 100%;
    }
    
    form
  </style>
</head>

<body>
  <form>
    <div>
      <label forName='form-name'>Name:</label>
      <div>
        <input id='form-name' type='text' />
      </div>
    </div>
    <div>
      <label forName='form-email'>Email:</label>
      <div>
        <input id='form-email' type='email' />
      </div>
    </div>
    <div>
      <label forName='form-comments'>Comments:</label>
      <div>
        <textarea id='form-comments'></textarea>
      </div>
    </div>
    <div>
      <input type='submit' />
      <input type='reset' />
    </div>
  </form>
</body>

</html>

＆＃13;

Answer 4

试试这个：

HTML 的

<table>
    <form>         
        <tr>
            <td><label for='form-name'>Name:</label><br>
            <input id='form-name' type='text'/></td>
        </tr>            
        <tr>
            <td><label for='form-email'>Email:</label><br>
            <input id='form-email' type='email'/></td>
        </tr>
        <tr>
            <td><label for='form-comments'>Comments:</label><br>
            <textarea id='form-comments'></textarea></td>
        </tr>            
        <tr>
            <td><input type='submit'/>
            <br>
         <input type='reset'/></td>
        </tr>
    </form>
</table>

CSS

form {
  display: table;
  width: 200px;
}
form div {
  display: table-row;
}
form div label {
  display: table-cell;
  padding-right: 10px;
  text-align: right;
  vertical-align: middle;
}
form div input, form div textarea {
  display: table-cell;
} 

div{
   border:1px solid black;
}

table td input, table td textarea{
   width: 100%;
}

table td{
   width: 150px;
}

JSFiddle:

Answer 5

首先是关于标签的评论：

标签forName =“form-email ....

应写成：

标签为=“form-email ...

这对以下内容非常有用：标签（文字）点击 - ＆gt;专注于文本用于的输入字段。

回答你的问题：

为什么textarea细胞的宽度大于其上方细胞的宽度？

这是因为html元素textarea内部可以有行和cols属性，如果你没有指定它，它有默认值。例如，检查一下（它的尺寸将缩小50％）：

<textarea cols="10" rows="5" id='form-comments'></textarea>

此处列出默认值（20列，2行）：

http://www.w3schools.com/tags/att_textarea_rows.asp

http://www.w3schools.com/tags/att_textarea_cols.asp

如果你想覆盖它，只需将宽度：100％填充宽度。

为什么两个按钮输入字段不在同一行？

你在div上使用表格显示，你的风格不够具体，你正在制作一般的div和输入风格，这就是你的问题。要解决此问题，请省略包含按钮的最后一个div，以便您只有：

            <input type='submit'/>
            <input type='reset'/>

从“表单”样式中删除display：table。

https://jsfiddle.net/n3145f60/13/

Answer 6

您可以将width: 100%与box-sizing: border-box一起使用。和display: inline-block按钮。

input[type="text"], input[type="email"], textarea {
    width: 100%;
    box-sizing: border-box;
}

<强> jsFiddle

使用CSS表时，表单字段无法正确对齐

更新

6 个答案: