Html 将单选按钮左对齐的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4457609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to left align radio buttons on top of each other?
提问by leora
I have a bunch of radio buttons, and I have a
我有一堆单选按钮，我有一个
<br/>
after each one and they all seem to horizontal align center (even if I put some CSS that says left align).
在每一个之后，它们似乎都水平对齐中心（即使我放了一些说左对齐的 CSS）。
Here is the CSS,
这是CSS，
.radioLeft
{
text-align:left;
}
Here is the HTML:
这是 HTML：
<input checked="checked" class="radioLeft" name="CalendarType" value="1" type="radio"><b>Person </b>(False) <br>
<input checked="checked" class="radioLeft" name="CalendarType" value="2" type="radio"><b>Event </b>(False) <br>
<input checked="checked" class="radioLeft" name="CalendarType" value="3" type="radio"><b>Release</b>(False) <br>
回答by foX092
You shouldn't apply this style to the radios but to the container they are on, in that case you can add a div:
您不应该将此样式应用于收音机，而是应用于它们所在的容器，在这种情况下，您可以添加一个 div：
<div class="radioLeft">
<input checked="checked" name="CalendarType" value="1" type="radio"><b>Person </b>(False) <br>
<input checked="checked" name="CalendarType" value="2" type="radio"><b>Event </b>(False) <br>
<input checked="checked" name="CalendarType" value="3" type="radio"><b>Release</b>(False) <br>
</div>
回答by Vijender Reddy
Try with the following CSS style.
尝试使用以下 CSS 样式。
.radioLeft input{
text-align: left;
display:inline;
}
回答by Ivan Ivani?
You should check the alignment of the container that surrounds them.
您应该检查围绕它们的容器的对齐情况。
回答by theazureshadow
You try to add a CSS property that only applies to block-level elements (like div) to an inline element (input). This won't work; you need to create a block-level element (I chose to use labeland make it block-level using CSS, but that's just for semantics) and use it to contain each label.
您尝试将仅适用于块级元素（如div）的 CSS 属性添加到内联元素 ( input)。这行不通；您需要创建一个块级元素（我选择label使用 CSS 并使其成为块级元素，但这只是为了语义）并使用它来包含每个标签。
Try wrapping each in a labelwith class .radioLeft, remove that class from the inputs, and then add this CSS:
尝试将每个包装在一个labelwith class 中.radioLeft，从输入中删除该类，然后添加以下 CSS：
.radioLeft {
display: block;
text-align: left;
}
For example,
例如，
<label class="radioLeft"><input type="radio"><b>Person</b>(False)</label>
