复选框和PHP和CSS

Question

Ok let me rephrase this a bit. I have a form in the form I have checkboxes they currently display vertically I need them to display horizontally. The form is wrapped in a section tag. I put the id tag of colorSwatches as , I've tried , I've tried and for colorSwatches in the CSS I put display:inline-block. It did not work any variation. Here is the URL to see the page in question http://www.inertiastreak.com/serial_quilters/order.php

I have the following block of code:

<ul id="colorSwatches">
          <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['color[]'] == 'color[]') ? 'checked="checked"' : ''; ?>
              <li><input type="checkbox" name="color[]" value="red" />Red</li>
              <li><input type="checkbox" name="color[]" value="orange" />Orange</li>
              <li><input type="checkbox" name="color[]" value="yellow" />Yellow</li>
              <li><input type="checkbox" name="color[]" value="green" />Green</li>
              <li><input type="checkbox" name="color[]" value="blue" />Blue</li> 
              <li><input type="checkbox" name="color[]" value="purple" />Purple</li> 
              <li><input type="checkbox" name="color[]" value="pink" />Pink</li>
              <li><input type="checkbox" name="color[]" value="brown" />Brown</li> 
              <li><input type="checkbox" name="color[]" value="black" />Black</li>                   
              <li><input type="checkbox" name="color[]" value="white" />White</li>                   
          </ul>

Right now the list of checkboxes show in a vertical line. I would like the checkbox and color to show up in a horizontal line. Every which variation of CSS I put in is not working at all. I have tried putting the id of colorSwatches as section#colorSwatches ul li {display:inline-block;} and it didn't work. The only way it worked was that I closed the form above the list of colors, then closed the section tag. Opened a new section tag and a new form tag and essentially created a second form, which was unneeded.

If someone could please advise how to go get a stack of input fields like the ones above to display in the inline-block fashion that would be great. UL and LI can be removed it doesn't matter to me.

Btw the PHP shouldn't be changed.

Answer 1

Give class to li as class="li_color".

<ul id="colorSwatches">
              <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['color[]'] == 'color[]') ? 'checked="checked"' : ''; ?>
              <li class="li_color"><input type="checkbox" name="color[]" value="red" />Red</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="orange" />Orange</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="yellow" />Yellow</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="green" />Green</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="blue" />Blue</li> 
              <li class="li_color"><input type="checkbox" name="color[]" value="purple" />Purple</li> 
              <li class="li_color"><input type="checkbox" name="color[]" value="pink" />Pink</li>
              <li class="li_color"><input type="checkbox" name="color[]" value="brown" />Brown</li> 
              <li class="li_color"><input type="checkbox" name="color[]" value="black" />Black</li>                   
              <li class="li_color"><input type="checkbox" name="color[]" value="white" />White</li>                   
          </ul>

Give the style to li_color as

#colorSwatches {width:100%;}
#colorSwatches .li_color { float:left; width:100px; }

If width is not enough, you can increase.