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

在输入本身上进行文本对齐将简单地对齐按钮内的文本，如果添加，您可以看到该文本，例如{c}按钮width:100px。

您最想要的是将id分配给父div和text-align：右边。

#submit_div {
    text-align:right;
}

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

在CSS中对齐简单的简单按钮

3 个答案:

CSS

HTML