up vote 0 down vote favorite

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.

share|improve this question
    
does this answer help: stackoverflow.com/questions/12981746/… ? – Maximus2012 Aug 6 '13 at 4:40
    
nope. inertiastreak.com/serial_quilting/order.php Here is the page in question you will see the list of checkboxes towards the bottom – user2649551 Aug 6 '13 at 4:45
up vote 1 down vote

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.

share|improve this answer
    
And how will that make the checkboxes appear in one row, left to right not top to bottom? – user2649551 Aug 6 '13 at 4:49
    
Nope didn't work – user2649551 Aug 6 '13 at 4:54
    
I dont know what is not working. It is working fine for me. You can reduce the width in #colorSwatches .li_color {float:left; width:70px} to show all the color in single line. – Saranya Sadhasivam Aug 6 '13 at 6:45
    
In your url inertiastreak.com/serial_quilting/order.php - contact_order.css - Line no. 33 #contact-form input - given the input type checkbox width as 650px. Remove it or give .li_color input {width: 15px;} – Saranya Sadhasivam Aug 6 '13 at 7:17
up vote 1 down vote

For the ul li listing make 100% width like

#colorSwatches{width:100%;float:left;}
#colorSwatches li{float:left;}

Refer this DEMO

share|improve this answer
    
And how will that make the checkboxes appear in one row, left to right not top to bottom? – user2649551 Aug 6 '13 at 4:49
    
they will from left to right – Gautam3164 Aug 6 '13 at 4:50
    
See my edited ans with DEMO – Gautam3164 Aug 6 '13 at 4:53
    
Nope that didn't work – user2649551 Aug 6 '13 at 4:55
    
What didnt worked..??seen that demo..??what problem – Gautam3164 Aug 6 '13 at 4:58
up vote 1 down vote

Try this css: 

#colorSwatches li{
    display: inline;
}
#colorSwatches{
    white-space: nowrap;
}
share|improve this answer
    
Ok so this semi worked. It was able to put the check boxes with the color next to it in a straight line, but it puts an enormous amount of space between the check box and the color and an enormous amount of space between the previous color and the next checkbox – user2649551 Aug 6 '13 at 5:06
up vote 0 down vote

the best and easiest way is add this after every line :

<div style="clear:both"></div>
share|improve this answer
    
That doesn't make sense – user2649551 Aug 6 '13 at 4:50
    
excuse me , set the float of checkboxes to left, and then put it after each line, – Alireza Fallah Aug 6 '13 at 5:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.