我如何获得输入无线电元素水平对齐？ [英] How can I get input radio elements to horizontally align?

问题描述

我希望这些广播输入在屏幕上延伸，而不是在其他屏幕之下： HTML

 < input type =radioname =editListvalue =always>总是
< br> 
< input type =radioname =editListvalue =never> Never 
< br> 
< input $ type =radioname =editListvalue =costChange>成本变动
  

CSS

  input [type =radio] {
 margin-left：10px; 
} 
  

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

我用显示属性来摆弄，并用google搜索，和bang（bung？binged？）作为答案，但还没有找到答案。

解决方案

只需删除元素之间的换行符（< br> 标签） - input 元素为 inline-block 默认情况下（至少在Chrome中）。 （更新示例） 。

< input type =radioname =editListvalue =always>总是
< input type =radioname =editListvalue =从来没有>从来没有
<输入类型=无线电名称=编辑列表值=costChange>成本变化
  

---

尽管如此，我建议使用< label> 元素。这样做时，点击标签也会检查元素。可以将属性的< label> 的与< input> 的 id ： （示例）

 < input type =radioname =editListid =alwaysvalue =always /> 
< label for =always>始终< / label> 
 
< input type =radioname =editListid =nevervalue =never/> 
< label for =never>从不&< / label> 
 
< input type =radioname =editListid =changevalue =costChange/> 
< label for =change>成本变更< / label> 
  

..或包装< label> 元素直接放在< input> 元素的周围： （example）

 < label> 
< input type =radioname =editListvalue =always/>总是
< / label> 
< label> 
< input type =radioname =editListvalue =never/> Never 
< / label> 
< label> 
< input type =radioname =editListvalue =costChange/>费用变更
< / label> 
  

您也可以看中并使用 ：已检查伪类。


I want these radio inputs to stretch across the screen, rather than one beneath the other:

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/

I've monkeyed around with the display properties, and googled, and bang (bung? binged?) for an answer, but haven't found one.

解决方案

In your case, you just need to remove the line breaks (<br> tags) between the elements - input elements are inline-block by default (in Chrome at least). (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

---

I'd suggest using <label> elements, though. In doing so, clicking on the label will check the element too. Either associate the <label>'s for attribute with the <input>'s 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>

..or wrap the <label> elements around the <input> elements directly: (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>

You can also get fancy and use the :checked pseudo class.

这篇关于我如何获得输入无线电元素水平对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！