CSS单选按钮问题

我组建了一个简单的形式存入的钱一组量。该表格有4个单选按钮。CSS单选按钮问题

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

这里是输出： enter image description here

你可以看到，在过去的单选按钮不垂直对齐。我意识到按钮后文本中有2个额外的字符。我不是CSS向导，并没有真正找到让这些按钮直线化的答案。有任何想法吗？

编辑：CSS代码在这里：

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

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

形式是在容器

来源

2015-07-04 jakewies

我复制从你的问题粘贴代码并运行它，它似乎完全一致。在没有CSS文件的情况下运行你的代码，看看会发生什么 – Skywalker

嗯这就是奇怪的。我会给它一个镜头。我唯一能想到的是''div class =“form-group”>'可能会导致问题。这是一个问题的一部分，需要我将我的文件链接到bootstrap，form-group类可能会覆盖我的其他css。我也可能是遥远，并且可能没有任何与它在所有笑 – jakewies

检查我下面的回答。它可能会帮助你。 – Skywalker

在您的CSS文件或您的HTML代码中，您正在使用“align center”设置。那就是为什么不一致。

这是你上面的代码输出与居中设置：

enter image description here

这是你的代码的输出，而不居中设置：

enter image description here

在代码中的某处，您将设置下面的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">

希望这有助于。

来源

2015-07-04 23:29:59 Skywalker

我的容器组（单选按钮所在的位置）包含css of text-align：center;但是即使用css专门为单选按钮覆盖也不会改变样式 – jakewies

你会介意在上面的问题中发布你的CSS吗？ – Skywalker

只是。希望它提供更多的清晰度。即使在'.container' css中取出'text-align：center'也没有做任何事情。现在排序困难。 – jakewies

为什么不使用表来使按钮对齐（便于使用Dreamweaver为你的编辑工具）

来源

2015-07-04 23:19:49 HenriSwagz

CSS单选按钮问题

回答

相关问题