在单选按钮中移动文本

Question

我如何简单地移动文本，使其不会在<input>字段下方继续，而不会使<div>包裹文本？

目前，我的HTML是：

<div class="answer">
<div class="control-group">
    <label class="radio">
        <input type="radio" id="a_0" name="a" value="86692726-ff5a-4f1f-b2f4-51a98e03eba0">
        Designer Brille Mode – Brille forum på Trendsales</label>
</div>
<div class="control-group">
    <label class="radio">
        <input type="radio" id="a_1" name="a" value="98f07484-5e65-47fc-bb46-b9a59125bdd2">
        Design by Me – unika og hjemmelavede annoncer på Trendsales</label>
</div>
<div class="control-group">
    <label class="radio">
        <input type="radio" id="a_2" name="a" value="248e7343-ddf7-4d61-94fa-e5425fa5f54b">
        Dansk Børne Mode på Trendsales</label>
</div>
</div>

我使用Bootstrap CSS Framework，直播示例可以是found in JsBin。

Answer 1

第一步：不要将input与label包装在一起。

第二步：更改display＆amp;的默认input label至block，设置width和float them。

所以CSS会是这样的：

.answer {width:200px;overflow:hidden;}
input,label {display:block;float:left}
input {clear:left;width:16px;}
label {width:184px;}

演示： http://jsfiddle.net/6v8Dc/

Answer 2

 代替常规空格或display: inline-block;

Answer 3

的 Demo 的

您现在习惯white-space nowrap就像这样

.control-group {
    white-space: nowrap;
}

的 Demo 的