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

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

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

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

例如，

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

Answer 4

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

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

4 个答案: