HTML CheckBox labels within a container are not displayed as expected
Posted
by
Tiny
on Stack Overflow
See other posts from Stack Overflow
or by Tiny
Published on 2012-11-12T22:42:06Z
Indexed on
2012/11/12
23:00 UTC
Read the original article
Hit count: 162
The following HTML code attempts to display checkboxes inside a <div></div> container.
<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>
What it displays can be visible in the following snap shot.
It is seen that various colour stripes which are displayed using the following <div> tag
<div style='background-color:#FF8C00; width: 180px;' title="darkorange">  </div>
are displayed below their respective checkboxes which are expected to be displayed in a straight line even though I'm using the white-space: nowrap; style attribute.
How to display each stripe along with its respective checkbox in a straight line?
It was explained in one of my questions itself but in that question each checkbox had a text label in place of such colour stripes. Here it is. I tried to do as mentioned in the accepted answer of that question but to no avail in this case.
© Stack Overflow or respective owner
