对齐单选按钮及其标签

Question

我现在变得疯狂，因为我现在尝试将我的单选按钮设置好几个小时，我无法达到我的目标（我对css世界全新了）。

我想做的很简单：

我希望在我的div中居中的三个大的radiobutton，标签与按钮垂直对齐。类似的东西：

我有以下html：

<div class="answers">
    <label>
        <input type="radio" name="answers" value="male" /> All
    </label>
    <label>
        <input type="radio" name="answers" value="female" /> Name
    </label>
    <label>
        <input type="radio" name="answers" value="male" /> Vendor No.
    </label>
</div>

结果如下：

我想要更大的按钮和更大的文字。我希望文本位于buttom右侧，并带有一点填充。我希望所有单选按钮都居中。我尝试了很多东西，但一切都看起来很奇怪。请帮助我......我开始讨厌css ....

Answer 1

发生这种情况的唯一原因是让你的css中的display: block到无线电：

input[type=radio] {
  display: block;
}

<div class="answers">
  <label>
    <input type="radio" name="answers" value="male" />All
  </label>
  <label>
    <input type="radio" name="answers" value="female" />Name
  </label>
  <label>
    <input type="radio" name="answers" value="male" />Vendor No.
  </label>
</div>

您可以使用display: block：

将nth-child添加到第二个标签

label:nth-child(2) {
  display: block;
}

<div class="answers">
  <label>
    <input type="radio" name="answers" value="male" />All
  </label>
  <label>
    <input type="radio" name="answers" value="female" />Name
  </label>
  <label>
    <input type="radio" name="answers" value="male" />Vendor No.
  </label>
</div>

<强>参考

nth-child

Answer 2

http://jsfiddle.net/6b888vp8/2/

将display：block添加到answers div中的标签，并向左浮动到输入。 HTML也发生了变化

.answers label {
    display: block
}

.answers input[type="radio"] {
    float: left;
}

<div class="answers">
    <input type="radio" name="answers" value="male" /><label>All</label>
    <input type="radio" name="answers" value="female" /><label>Name</label>
    <input type="radio" name="answers" value="male" /><label>Vendor No.</label>
</div>

Answer 3

您可以使用此CSS：

Devise::PasswordsController

JSFiddle：http://jsfiddle.net/ghorg12110/uqyfbjsb/