CSS 单选按钮问题

Question

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

<form action="deposit.php" method="post"> <fieldset> <div class="form-group"> <input type="radio" name="deposit" value="100"> 0 <br> <input type="radio" name="deposit" value="250"> 0 <br> <input type="radio" name="deposit" value="500"> 0 <br> <input type="radio" name="deposit" value="1000"> ,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 代码中，您正在使用 "align centre" 设置。这就是不对齐的原因。

这是上面的代码使用居中对齐设置后的输出：

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

您在代码中的某处设置了以下 div class 以居中对齐。

 // 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">

希望对您有所帮助。

CSS 单选按钮问题

CSS Radio Button issues

html

css

radio-button