0

<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を使用しています。ライブの例はJsBin にあります。

4

3 に答える 3

1

最初のステップ: を でラップしないinputでlabelください。

2 番目のステップ: &のデフォルトdisplayを, setおよびに変更します。inputlabelblockwidthfloat 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/

于 2012-08-20T06:54:24.050 に答える
0

&nbsp;通常のスペースの代わりに、またはdisplay: inline-block;

于 2012-08-20T06:46:32.800 に答える
0

デモ

こんにちは今はwhite-space nowrapこんな感じです

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

デモ

于 2012-08-20T06:53:41.920 に答える