Home/ Questions/Q 8814701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T04:11:42+00:00

The following HTML code attempts to display checkboxes inside a <div></div> container. <div style=overflow:

  • 0

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">&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>

What it displays can be visible in the following snap shot.

enter image description here

It is seen that various colour stripes which are displayed using the following <div> tag

<div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp</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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have used DIV to mark up the label. TheDIV is presented as block element by default. Just set it to display: inline; or display: inline-block;. Or use another element– such as SPAN.

    • 0