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中对齐按钮。

只需在div类上添加text-align：就可以了，您将在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，则可以看到按钮css的width:100px ，例如width:100px 。

您最可能想要的是为父div分配一个ID，然后text-align：right。

#submit_div {
    text-align:right;
}

<div id="submit_div">
    <input type="submit" value="Register" id="submit" />
</div>