Html 左对齐单选按钮的最佳方式是什么？

我有一串单选按钮，还有一个

<br/>

以下是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>

Person（假）

事件（假）

释放（假）

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

人（假）

事件（假）

释放（假）

您尝试将仅适用于块级元素（如

div

）的CSS属性添加到内联元素（

input

）。这行不通；您需要创建一个块级元素（我选择使用

label

并使用CSS将其设置为块级，但这只是为了语义）并使用它来包含每个标签

尝试用class

.radioreft

将每个类包装在

标签中，从输入中删除该类，然后添加此CSS：

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

比如说,

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

人（假）
您应该检查包围它们的容器的对齐情况。
尝试以下CSS样式

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

哦，哦，是不是用了
？：-）再多一点HTML，这样我就可以把它放在@Fred中了：似乎有一个父元素带有
text align:center
，所以你可能需要重置它。
display:inline
的+1使事情（稍微）简单一些。如果出现问题，也可以使用
内联块
。欢迎来到SO:-）
.radioLeft input{
    text-align: left;
    display:inline;
}