php - 复选框和PHP和CSS

好吧，让我重新说明一下。我有一个表单，其中有我当前处于垂直显示状态的复选框，我需要它们水平显示。表单包装在section标签中。我将colorSwatches的id标签设置为，我已经尝试过，我已经尝试过，对于colorSwatches，我在CSS中放置了display：inline-block。它没有任何变化。这是查看有问题的页面http://www.inertiastreak.com/serial_quilters/order.php的URL

我有以下代码块：

<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的ID设置为#colorSwatches ul li {display：inline-block;}，但此操作无效。它起作用的唯一方法是关闭颜色列表上方的表单，然后关闭section标签。打开一个新的section标签和一个新的form标签，并从本质上创建了第二个不需要的表单。

如果有人可以建议如何去获得一堆上面的输入字段，以内联块方式显示，那将是很好的。 UL和LI可以删除，这对我来说无关紧要。

顺便说一句，PHP不应更改。

最佳答案

将class赋予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; }

如果宽度不够，可以增加。