CSS Radio Button问题

Question

我正在整理一个简单的表格来存入一定数量的钱。表格有4个单选按钮。

<form action="deposit.php" method="post"> <fieldset> <div class="form-group"> <input type="radio" name="deposit" value="100"> $100 <br> <input type="radio" name="deposit" value="250"> $250 <br> <input type="radio" name="deposit" value="500"> $500 <br> <input type="radio" name="deposit" value="1000"> $1,000 <br> </div> <div class="form-group"> <button type="submit" class="btn btn-default">Deposit</button> </div> </fieldset> </form>

这是输出：

您可以看到最后一个单选按钮未垂直对齐。我意识到按钮后的文本中有2个额外的字符。我不是CSS向导，并没有真正找到使这些按钮笔直的答案。有什么想法吗？

编辑：CSS代码：

.container {
    /* center contents */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

input[type='radio'] {
    width: 20px;
}

表单在容器中

Answer 1

为什么不使用表格使按钮对齐（使用Dreamweaver作为编辑工具更容易）

Answer 2

在您的CSS文件或HTML代码中，您正在使用＆＃34;对齐中心＆＃34;设置。那就是为什么不一致。

这是使用对齐中心设置的上述代码的输出：

这是没有对齐中心设置的代码输出：

在代码中的某处，您将下面的div类设置为对齐中心。

 // Removing the align setting will solve the issue. If its not in-line CSS then check you external CSS file.
 <div class="form-group" align="center">

希望这有帮助。