Question

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

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/

我已经开始使用显示属性，谷歌搜索，然后敲打（砰？砰？？）作为答案，但还没有找到答案。

Answer 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>的{{1}}属性与for的{{1}}相关联：(example)

<input>

..或直接在id元素周围包裹<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>元素：(example)

<label>

您也可以使用:checked pseudo class。

Answer 2

此处已更新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>

Answer 3

要使单选按钮水平列出，只需添加

即可

RepeatDirection =“水平”

到你的.aspx文件中，声明了asp：radiobuttonlist。

Answer 4

这也像护身符一样工作

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

如何让输入无线电元素水平对齐？

4 个答案: