html - 在单选按钮中移动文本

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

第一步:不要用label包裹input。

第二步:将input & label默认的display改为block，设置width 和 float 它们。

所以 CSS 应该是这样的:

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

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