0

私はレスポンシブフォームデザインに取り組んでいます。絞り込まれたコードは以下のとおりです。SENDボタンが他の入力フィールドと正しく整列しないのはなぜですか？

フォームラベルにも5emmargin-left:5emがあるので、他の入力フィールドと並べる必要があるaを使用していますが、そうではありません。width代わりに、ボタンは左にオフセットされています。私は何が欠けていますか？ありがとう。

<!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をピクセルレベルで表示すると、ラベルと入力フィールドの間に空白が表示されます。この空白は幅が約3ピクセルで、CSSを通過しません。送信ボタンが上記のフィールドと整列していないのは、その聖霊降臨祭のスペースが原因です。

送信ボタンにmargin-left：5emを使用した場合、その余分な空白は追加されません。したがって、自分自身を満足させるために、これまでに行ったことを続行できます。つまり、送信するものもdivに配置し、空のラベルを使用します。入力の前にタグを付け、cssからマージン左を削除します

また

あなたもチャンドラカントの答えに従うかもしれません。

Update1：

その空白は、エディターで「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>
...

それを試してみてください。

Update2：主な理由（ボタンのデフォルトの境界線）

ボタンのborderプロパティ（デフォルト）のため、ボタンはフィールドに垂直に配置されていません。ボタンの境界線（この場合はborder-left：0pxのみが必要です）を0pxにすると、ボタンは次のように配置されます。フィールド。

于 2013-02-06T05:20:54.697 に答える
0

入力要素に以下のスタイルを使用すると、これが機能する可能性があります

display: block;
margin-left: 5.2em;

これはその送信ボタン専用です

于 2013-02-06T04:29:16.360 に答える