CSS单选按钮问题答案

【问题标题】：CSS Radio Button issuesCSS单选按钮问题
【发布时间】：2015-11-22 01:57:29
【问题描述】：

我正在整理一个简单的表格来存入一定数量的钱。该表单有 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;
}

表格在容器中

【问题讨论】：

我从您的问题中复制粘贴代码并运行它，它似乎完全对齐。在没有 CSS 文件的情况下运行代码，看看会发生什么。
嗯，这很奇怪。我会试一试。我唯一能想到的是<div class="form-group"> 可能会导致问题。这是需要我将文件链接到引导程序的问题的一部分，并且表单组类可能会覆盖我的其他 css。我也可能走得很远，这可能与它根本没有任何关系，哈哈
在下面查看我的答案。它可能会帮助你。

标签： html css radio-button

【解决方案1】：

在您的 CSS 文件或 HTML 代码中，您使用的是“对齐中心”设置。这就是不对齐的原因。

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

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

您在代码中的某处将以下 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">

希望这会有所帮助。

【讨论】：

我的容器组（单选按钮所在的位置）包含 text-align: center; 的 css，但即使使用专门用于单选按钮的 css 覆盖它也不会改变样式
您介意在上面的问题中发布您的 CSS 吗？
刚刚做了。希望它提供更多的清晰度。即使在.container css 中取出text-align: center 也没有做任何事情。现在有点难过。
这是您连接到 HTML 文件的唯一 CSS 还是您有任何其他外部 CSS 文件？
不，这不是，但 css 的其余部分不应该有影响。如果你愿意，我可以发布它。

【解决方案2】：

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

【讨论】：