0

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test page</title>
<style>
      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;
      }
</style>
</head>    
<body>
<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>
</body>
</html>
4

2 回答 2

0

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

当您在提交按钮上使用margin-left: 5em时，不会添加额外的空格。因此，为了满足自己，您可以继续到目前为止所做的事情，我的意思是，将提交也放在 div 中并使用空标签在输入之前标记并从css中删除margin-left

或者

您也可以遵循 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，您会发现按钮与田野。

于 2013-02-06T05:20:54.697 回答
0

对您的 Input 元素使用以下样式，这可能会起作用

display: block;
margin-left: 5.2em;

这仅适用于该发送按钮

于 2013-02-06T04:29:16.360 回答