0

次のHTMLコードは、<div></div>コンテナ内にチェックボックスを表示しようとします。

<div style="overflow: auto; width: auto; display:block; max-height:130px; max-width:200px; background-color: #FFF; height: auto; border: 1px double #336699; padding-left: 2px;">
    
    <label for="chk12" style='white-space: nowrap;'>
        <input type='checkbox' id="chk12" name='chk_colours' value="12" class='validate[required] text-input text'>
        <div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp;</div>
    </label>    
        
    <label for="chk11" style='white-space: nowrap;'>
        <input type='checkbox' id="chk11" name='chk_colours' value="11" class='validate[required] text-input text'>
        <div style='background-color:#D9D919; width: 180px;' title="brightgold">&nbsp;&nbsp;</div>
    </label>
    
    <label for="chk10" style='white-space: nowrap;'>
        <input type='checkbox' id="chk10" name='chk_colours' value="10" class='validate[required] text-input text'>
        <div style='background-color:#76EE00; width: 180px;' title="chartreuse2">&nbsp;&nbsp;</div>
    </label>
    
    <label for="chk9" style='white-space: nowrap;'>
        <input type='checkbox' id="chk9" name='chk_colours' value="9" class='validate[required] text-input text'>
        <div style='background-color:#2E0854; width: 180px;' title="indigo">&nbsp;&nbsp;</div>
    </label>
    
    <label for="chk8" style='white-space: nowrap;'>
        <input type='checkbox' id="chk8" name='chk_colours' value="8" class='validate[required] text-input text'>
        <div style='background-color:#292929; width: 180px;' title="gray16">&nbsp;&nbsp;</div>
    </label>                    
</div>

表示される内容は、次のスナップショットで確認できます。

ここに画像の説明を入力してください

<div>次のタグを使用して表示されるさまざまなカラーストライプが表示されます

<div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp</div>

white-space: nowrap;style属性を使用している場合でも、直線で表示されることが期待されるそれぞれのチェックボックスの下に表示されます。

各ストライプとそれぞれのチェックボックスを直線で表示するにはどうすればよいですか？

それは私の質問の1つ自体で説明されましたが、その質問では、各チェックボックスにそのようなカラーストライプの代わりにテキストラベルがありました。こちらです。私はその質問の受け入れられた答えで述べられているようにしようとしましたが、この場合は役に立ちませんでした。

4

3 に答える 3

3

DIVラベルをマークアップするために使用しました。はDIVデフォルトでブロック要素として表示されます。display: inline;またはに設定するだけdisplay: inline-block;です。または、などの別の要素を使用しSPANます。

于 2012-11-12T22:48:12.543 に答える
2

sは使用しない<div>でください。これらはブロック要素であるため、チェックボックスと整列しません。<span>代わりにsを使用してみてください

編集

または、色付きのsのfloat:rightCSSに追加します<div>

編集2

少しCSSを使用する：

label div{
   display: inline-block;
}

ここでの例：http：//jsfiddle.net/koenpunt/Ca22j/

于 2012-11-12T22:47:47.917 に答える
1

どうぞ ：）

http://jsfiddle.net/Uaq85/

<div style="overflow: auto; width: auto; display:block; max-height:130px; max-width:200px; background-color: #FFF; height: auto; border: 1px double #336699; padding-left: 2px;">

    <label for="chk12" style='white-space: nowrap;'>
        <input type='checkbox' id="chk12" name='chk_colours' value="12" class='validate[required] text-input text'>
        <div style='background-color:#FF8C00; width: 180px;display:inline-block;' title="darkorange">&nbsp;&nbsp;</div>
    </label>    

    <label for="chk11" style='white-space: nowrap;'>
        <input type='checkbox' id="chk11" name='chk_colours' value="11" class='validate[required] text-input text'>
        <div style='background-color:#D9D919; width: 180px;display:inline-block;' title="brightgold">&nbsp;&nbsp;</div>
    </label>

    <label for="chk10" style='white-space: nowrap;'>
        <input type='checkbox' id="chk10" name='chk_colours' value="10" class='validate[required] text-input text'>
        <div style='background-color:#76EE00; width: 180px;display:inline-block;' title="chartreuse2">&nbsp;&nbsp;</div>
    </label>

    <label for="chk9" style='white-space: nowrap;'>
        <input type='checkbox' id="chk9" name='chk_colours' value="9" class='validate[required] text-input text'>
        <div style='background-color:#2E0854; width: 180px;display:inline-block;' title="indigo">&nbsp;&nbsp;</div>
    </label>

    <label for="chk8" style='white-space: nowrap;'>
        <input type='checkbox' id="chk8" name='chk_colours' value="8" class='validate[required] text-input text'>
        <div style='background-color:#292929; width: 180px;display:inline-block;' title="gray16">&nbsp;&nbsp;</div>
    </label>                    
</div>

于 2012-11-12T22:53:29.450 に答える