html - CSS中普通简单按钮的对齐方式

Question

我从一本书中得到了这个简单的 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;
}

问题是我无法对齐表单底部的“注册”按钮。我在这里想念什么？

提前致谢。

Answer 1

修复：http: //jsfiddle.net/FerF7/

您在#submit 类中拥有的是一个文本对齐，它在按钮本身内对齐文本，而不是在 div 内对齐按钮。

只需将 text-align: right 添加到您的 div 类，您将在 div 内对齐，如下所示：

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

Answer 2

您必须对齐父容器，而不是对齐按钮本身的文本。更改您的 HTML 和 CSS，如下所示：

CSS

.submit-button {
    text-align: right;
}

HTML

<div class="submit-button">
    <input type="submit" value="Register" id="submit" />
</div>

Answer 3

对输入本身进行文本对齐只会对齐按钮内的文本，如果添加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>