Question

好的，让我稍微改写一下。我有一个表单，我有复选框，他们目前垂直显示我需要它们水平显示。表单包含在section标签中。我把colorSwatches的id标签作为，我已经尝试过，我已经尝试过并且在CSS中使用colorSwatches我将display：inline-block。它没有任何变化。以下是查看问题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的id作为＃colorSwatches ul li {display：inline-block;}部分，并且它不起作用。它工作的唯一方法是我关闭颜色列表上方的表单，然后关闭section标签。打开一个新的部分标签和一个新的表格标签，基本上创建了第二个表格，这是不需要的。

如果有人可以请建议如何获得一堆输入字段，如上面那些以内联块方式显示，这将是很好的。 UL和LI可以删除它对我没关系。

顺便说一下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

对于ul li列表，请将100％宽度设为

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

请参阅此DEMO

Answer 3

试试这个css：

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

Answer 4

最好和最简单的方法是在每一行之后添加：

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

复选框和PHP和CSS

4 个答案: