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

Question

我有一堆单选按钮，

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

Answer 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>

Answer 2

尝试使用以下 CSS 样式。

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

Answer 3

您应该检查它们周围的容器是否对齐。

Answer 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>