将单选按钮左对齐的最佳方法是什么？答案

【问题标题】：What is the best way to left align radio buttons on top of each other?将单选按钮左对齐的最佳方法是什么？
【发布时间】：2011-05-26 08:23:34
【问题描述】：

我有一堆单选按钮，我有一个

<br/>

在每一个之后，它们似乎都水平居中对齐（即使我放了一些显示左对齐的 CSS）。

这是 CSS，

.radioLeft
{
    text-align:left;
}

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

【问题讨论】：

哦哦哦哦，是用<table>吗？ :-)
多一点HTML，我可以把它放在jsfiddle.net/d9Nvk
@Fred：似乎有一个带有text-align: center 的父元素，所以您可能需要重置它。

标签： html css radio-button alignment

【解决方案1】：

您不应该将此样式应用于收音机，而是应用于它们所在的容器，在这种情况下，您可以添加一个 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>

【讨论】：

【解决方案2】：

试试下面的 CSS 样式。

.radioLeft input{
    text-align: left;
    display:inline;
}

【讨论】：

+1 for display: inline - 让事情（一点）更简单。如果事情发生了，你也可以使用inline-block。欢迎来到 SO :-)

【解决方案3】：

您应该检查围绕它们的容器的对齐方式。

【讨论】：

【解决方案4】：

您尝试将仅适用于块级元素（如 div）的 CSS 属性添加到内联元素（input）。这行不通；您需要创建一个块级元素（我选择使用 label 并使用 CSS 将其设为块级，但这只是为了语义）并使用它来包含每个标签。

尝试用 .radioLeft 类将每个类包装在 label 中，从输入中删除该类，然后添加此 CSS：

.radioLeft {
  display: block;
  text-align: left;
}

例如，

<label class="radioLeft"><input type="radio"><b>Person</b>(False)</label>

【讨论】：