3

我似乎无法将 radio_button_tag 与其 label_tag 水平对齐。（使用 HAML）

=radio_button_tag(:animal, "dog")
=label_tag(:animal, "Dog")

我为这两个表单助手分配了哪些类，以使它们彼此相邻，如下所示：

O Dog
4

2 回答 2

5

在封闭的表单标签上使用.form-inline通常可以解决我遇到的任何垂直对齐问题，尽管它可能不适用于所有情况。

更新

Bootstrap 现在还有几个类，您可以将它们应用于封闭块，以便分别将复选框和单选按钮与以下文本对齐。从他们的文档中：

<label class="checkbox">
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

它不一定是标签 - 任何块元素都应该工作。

请参阅此处： http: //twitter.github.com/bootstrap/base-css.html#forms（“复选框和收音机”部分）。

于 2012-08-30T03:26:57.350 回答
1

对我来说，内联显示元素的各种方式并没有解决问题。我意识到问题不在于显示，而是单选按钮的内容高度（出于某种原因 46px）。

因此，将单选按钮的高度设置为“自动”为我解决了这个问题：

input[type='radio'] {
  height: auto;
 }
于 2014-07-20T17:05:12.390 回答