以下 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"> </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"> </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"> </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"> </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"> </div>
</label>
</div>
它显示的内容可以在以下快照中看到。
可以看出,使用以下<div>
标签显示的各种颜色条纹
<div style='background-color:#FF8C00; width: 180px;' title="darkorange">  </div>
white-space: nowrap;
显示在它们各自的复选框下方,即使我使用的是样式属性,它们也应该以直线显示。
如何以直线显示每个条纹及其各自的复选框?
我的一个问题本身对此进行了解释,但在那个问题中,每个复选框都有一个文本标签来代替这种彩色条纹。在这里。我尝试按照该问题的已接受答案中所述进行操作,但在这种情况下无济于事。