在单选按钮中移动文本答案

【问题标题】：moving text in radio button在单选按钮中移动文本
【发布时间】：2012-08-20 14:54:47
【问题描述】：

我怎样才能简单地移动文本，使其不在<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。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

第二步：将input和label的默认display改为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/

【讨论】：

我确实提到了：without making a <div> wrap the text 你正在使用<span> 和display:block 女巫是一样的......我只想搞砸 CSS，不想搞砸HTML。
@balexandre 我在哪里使用span？我所做的 HTML 更改是并排添加 input 和 label。
您正在使用 <label class="radio"> 进行包装（至少也将其从包装 input 中移出），并且您甚至没有加载 Bootstrap 库，因为您破坏了它的表单集。
@balexandre 这是正确且有效的语义方式。做什么是你的选择。关于 Bootstrap，您有责任提供您所面临问题的演示。将我的回答原则应用于您的示例，它将起作用。
无法更改活动下的 HTML :( 需要等待活动结束，因为 CSS 在 Amazon S3 下，它只是替换文件......这就是为什么我只想使用 CSS这样做。但是感谢您的输入，我将相应地更改 HTML 并在活动结束后上传到生产服务器。关于演示，您可以在我的问题底部看到实时示例，在JsBin 下（因为我不太喜欢 JsFiddle）。

【解决方案2】：

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

【讨论】：

【解决方案3】：

Demo

你好现在习惯white-space nowrap这样

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

Demo

【讨论】：

这个想法是 wrap 文本，但第二行不应从 radio 按钮的底部开始，而应低于该行文本的开头。我不想要nowrap，因为我需要该块右侧的空间。