Флажки и php и css

Question

Хорошо, позвольте мне немного перефразировать это. У меня есть форма в форме, у меня есть флажки, которые они в настоящее время отображают вертикально. Мне нужно, чтобы они отображались горизонтально. Форма завернута в тег раздела. Я поместил тег id colorSwatches как, я пробовал, я пробовал, и для colorSwatches в CSS я помещал отображение: inline-block. Это не сработало. Вот URL, чтобы увидеть страницу в вопросе http://www.inertiastreak.com/serial_quilters/order.php

У меня есть следующий блок кода:

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

Сейчас список флажков показать в виде вертикальной линии. Я хочу, чтобы флажок и цвет отображались в горизонтальной линии. Каждая вариация CSS, которую я вставляю, вообще не работает. Я попытался поместить идентификатор colorSwatches в качестве раздела # colorSwatches ul li {display: inline-block;}, и это не сработало. Единственный способ, которым это работало, заключалось в том, что я закрыл форму над списком цветов, а затем закрыл тег раздела. Открыл новый тег раздела и новый тег формы и по существу создал вторую форму, которая была ненужной.

Если кто-то может проконсультироваться, как пойти, получите стек входных полей, подобных приведенным выше, чтобы отображать в режиме встроенного блока, что было бы здорово. UL и LI могут быть удалены, это не имеет значения для меня.

Btw PHP не следует изменять.

Answer 1

Дайте класс классу li как 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> 

Дайте стиль li_color в

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

Если ширина не достаточно, то можно увеличить.

Answer 2

Для ulli листинга сделать ширину 100%, как

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

См этот DEMO

Answer 3

самый лучший и самый простой способ это добавить это после каждой строки:

<div style="clear:both"></div> 

Answer 4

Попробуйте CSS :

#colorSwatches li{ 
    display: inline; 
} 
#colorSwatches{ 
    white-space: nowrap; 
}