0

私は本から取ったこの単純な HTML スニペット (フォーム) を持っています:

<form action="example.php" method="post">
<div>
    <label for="name" class="title">Name:</label>
    <input type="text" id="name" name="name" />
</div>
<div>
    <label for="email" class="title">Email:</label>
    <input type="email" id="email" name="email" />
</div>
<div>
    <span class="title">Gender:</span>
    <input type="radio" name="gender" id="male" value="M" />
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female" value="F" />
    <label for="female">Female</label> <br/>
</div>
<div>
    <input type="submit" value="Register" id="submit" />
</div>

次に、次の CSS コードと組み合わせます。

div {
    border-bottom: 2px solid #efefef;
    margin: 10px;
    padding-bottom: 10px;
    width: 260px;
}

.title {
    float: left;
    width: 100px;
    text-align: right;
    padding-right: 10px;
}

#submit {
    text-align: right;
    color: red;
}

問題は、フォームの下部にある [登録] ボタンを配置できないことです。ここで何が欠けていますか？

前もって感謝します。

4

3 に答える 3

3

修正: http://jsfiddle.net/FerF7/

#submit クラスにあるのは、div 内でボタンを整列させるのではなく、ボタン自体内でテキストを整列させる text-align です。

text-align: を div クラスに追加するだけで、次のように div 内で整列します。

div {
    border-bottom: 2px solid #efefef;
    margin: 10px;
    padding-bottom: 10px;
    width: 260px;
    text-align:right;
}
于 2013-10-30T20:10:14.750 に答える
0

入力自体で text-align を実行すると、ボタン内のテキストが単純に整列されます。これはwidth:100px、ボタン css などに追加すると確認できます。

最も可能性が高いのは、id を親 div と text-align:right に割り当てることです。

#submit_div {
    text-align:right;
}

<div id="submit_div">
    <input type="submit" value="Register" id="submit" />
</div>
于 2013-10-30T20:15:32.403 に答える