如何让输入单选元素水平对齐？

Posted 2023-03-05

【中文标题】如何让输入单选元素水平对齐？

【英文标题】：How can I get input radio elements to horizontally align?

【发布时间】：2013-10-01 15:01:54

【问题描述】：

我希望这些无线电输入在屏幕上延伸，而不是一个在另一个之下：

html

<input type="radio" name="editList" value="always">Always
<br>
<input type="radio" name="editList" value="never">Never
<br>
<input type="radio" name="editList" value="costChange">Cost Change

CSS

input[type="radio"] 
    margin-left:10px;

http://jsfiddle.net/clayshannon/8wRT3/13/

我一直在研究显示属性，用谷歌搜索，然后砰的一声（砰的一声？砰的一声？）寻找答案，但还没有找到。

【问题讨论】：

您可以从删除它们之间的换行符开始。如果它们仍然没有内联，那么可以尝试float: left; 或其他东西。

@Chad - 无需浮动它们，默认情况下它们是内联的。

你真的应该使用标签元素，它有助于减少歧义（哪个文本是哪个控件的？）

除非它们一旦被放置在内联并且一旦有更多它们对用户来说是模棱两可的。没有标签的收音机（和复选框）的激活区域太小，无法为许多用户准确点击。

...你bong来回答...

【参考方案1】：

在您的情况下，您只需要删除元素之间的换行符（<br> 标签） - 默认情况下，input 元素是 inline-block（至少在 Chrome 中）。 (updated example).

<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change

---

不过，我建议使用 <label> 元素。这样做时，单击标签也会检查元素。将<label> 的for 属性与<input> 的id 关联：(example)

<input type="radio" name="editList" id="always" value="always"/>
<label for="always">Always</label>

<input type="radio" name="editList" id="never" value="never"/>
<label for="never">Never</label>

<input type="radio" name="editList" id="change" value="costChange"/>
<label for="change">Cost Change</label>

..或将<label> 元素直接包裹在<input> 元素周围：(example)

<label>
    <input type="radio" name="editList" value="always"/>Always
</label>
<label>
    <input type="radio" name="editList" value="never"/>Never
</label>
<label>
    <input type="radio" name="editList" value="costChange"/>Cost Change
</label>

您也可以使用:checked pseudo class。

【参考方案2】：

这也很有效

<form>
    <label class="radio-inline">
      <input type="radio" name="optradio" checked>Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3
    </label>
  </form>

【参考方案3】：

要让您的单选按钮水平列出，只需添加

RepeatDirection="水平"

到声明 asp:radiobuttonlist 的 .aspx 文件。

【参考方案4】：

这里更新Fiddle

只需删除输入电台之间的</br>

<div class="clearBoth"></div>
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
<div class="clearBoth"></div>