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;显示在它们各自的复选框下方，即使我使用的是样式属性，它们也应该以直线显示。

如何以直线显示每个条纹及其各自的复选框？

我的一个问题本身对此进行了解释，但在那个问题中，每个复选框都有一个文本标签来代替这种彩色条纹。在这里。我尝试按照该问题的已接受答案中所述进行操作，但在这种情况下无济于事。

4

3 回答 3

3

你已经习惯DIV了标记标签。默认情况下DIV显示为块元素。只需将其设置为display: inline;或display: inline-block;。或者使用其他元素——例如SPAN.

于 2012-11-12T22:48:12.543 回答
2

不要使用<div>s，它们是块元素，导致它们与复选框不对齐。尝试使用<span>s 代替

编辑

或者添加float:right到有色<div>s的CSS

编辑 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 回答