使用display:inlineblock和ems使表单元素与提交按钮对齐

Question

我正在进行响应式表单设计；精简后的代码如下。为什么SEND按钮不能与其他输入字段正确对齐？

它使用的是margin-left:5em，它应该与其他输入字段对齐，因为表单标签的width也为5em，但不是。相反，按钮向左偏移。我错过了什么？

label, input, textarea {display: inline-block; vertical-align: top;}
label {width: 5em; text-align: right;}
input, textarea {width: 20em;}
input[type="submit"] {margin-left: 5em; width: 6em;}      
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 0;
    margin: 0;
}

<form action="#" method="post">
    <div>
        <label for="form1_name">Name:</label>
        <input id="form1_name" name="name" type="text" placeholder="first and last name" required="required" />
    </div>
    <div>
        <label for="form1_email">Email:</label>
        <input id="form1_email" name="email" type="email" placeholder="your email address" required="required" />
    </div>
    <div>
        <label for="form1_message">Message:</label>
        <textarea id="form1_message" name="message" cols="30" rows="10" required="required"></textarea>
    </div>
        <input value="SEND" type="submit" />
</form>

Answer 1

如果在像素级别查看UI，则会在标签和输入字段之间看到空白。这个空白大约有3px宽，它不会通过css。为什么你的提交按钮没有与上面的字段对齐是因为whitspace。

当您在提交按钮上使用左边距：5em时，不会添加额外的空白。因此，为了满足您自己，您可以继续您迄今为止所做的工作，我的意思是，将submit也放在div中，并在输入前使用空的label标记，并从css 中删除左侧的边距

或

你也可以遵循Chandrakant的答案。

更新1:

空白是因为在编辑器中按下"enter"键的新行。因此，要在不更改css或使用任何幻数的情况下删除空白，只需将这些标签和输入写在同一行中即可：

...
<div>
    <label for="form1_name">Name:</label><input id="form1_name" name="name" type="text" placeholder="first and last name" required="required" />
</div>
<div>
    <label for="form1_email">Email:</label><input id="form1_email" name="email" type="email" placeholder="your email address" required="required" />
</div>
...

试试看。

更新2:主要原因（按钮的默认边界）

由于按钮的边框属性（默认情况下），该按钮未与字段垂直对齐。如果将按钮的边框（在这种情况下，只需要左边框：0px）设置为0px则会发现按钮与字段对齐。

Answer 2

对输入元素使用以下样式，这可以工作

display: block;
margin-left: 5.2em;

这只适用于发送按钮