css - 单选按钮的垂直对齐和宽度

Question

我注意到如果我有一个文本然后是一个 radio ，比如:

<label for "myradio">Radio name</label>
<div class="holder">Yes <input type="radio" name="myradio" value="Yes"></div>
<div class="holder">No <input type="radio" name="myradio" value="No"></div>

地点:

label       { width: auto; margin-left: 15px; float: left; }
.holder     { float: left; line-height: 13px; margin: 6px 0 0 7px;  }
.holder input[type=radio]   { float: right; }

现在的问题是， radio 出现在文本"is"或“否”之后和下方(好像有上边距)。

现在，如果我向我的 .holder 添加一个宽度(足够宽)，我会在同一行同时获得文本和 radio 。但是，如果宽度小于 yes + radio 的宽度，则 radio 会像以前一样定位在较低的位置。

如果只有"is"和“否”，我可以使用固定宽度，但问题是那些"is"和“否”是数据库生成的，因此我无法控制文本宽度。所以我需要一种不同的方式将文本和广播放在同一行。

有什么想法吗？

Answer 1

检查我的 jsfiddle

这是您想要实现的目标吗？只需添加

 .holder span{float: left;margin-right: 3px;}
 .holder input{float: left;}

并将"is"和“否”包裹在

中

 <span></span>

标签