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

我有一大堆的单选按钮，和我各一个有将单选按钮对齐的最佳方式是什么？

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

来源

2010-12-16 leora

Ooohh，oohh，是通过使用'

'吗？ :-) – paxdiablo2010-12-16 05:10:53

多一点HTML，所以我可以把它放在http://jsfiddle.net/d9Nvk/ – Fred 2010-12-16 05:12:42

@Fred：看起来有一个父元素与'文本对齐：中心'，所以你可能不得不重置那个。 – theazureshadow 2010-12-16 05:15:16

回答

你应该这种风格并不适用于收音机，但他们都在容器中，在这种情况下你可以添加一个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>

来源

2010-12-16 05:12:10 foX092

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

尝试包裹每一个label与.radioLeft类，从输入删除类，然后添加此CSS：

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

例如，

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

来源

2010-12-16 05:12:25 theazureshadow

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

来源

2010-12-16 05:16:19

请尝试以下CSS样式。

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

来源

2010-12-16 10:37:11

+1：'display：inline' - 保持一点（简单一点）。如果事情发生了，你也可以使用'inline-block'。欢迎来到SO :-) – Bojangles 2010-12-16 10:41:16

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

回答

相关问题