复选框和 php 和 css答案

【问题标题】：Checkboxes and php and css复选框和 php 和 css
【发布时间】：2013-08-06 13:03:34
【问题描述】：

好的，让我重新表述一下。我有一个表单，我有复选框，它们当前垂直显示，我需要它们水平显示。表单被包裹在一个部分标签中。我将 colorSwatches 的 id 标签设置为，我已经尝试过，我已经尝试过，对于 CSS 中的 colorSwatches，我将 display: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 的 id 设置为 section#colorSwatches ul li {display:inline-block;} 但它没有用。它起作用的唯一方法是我关闭了颜色列表上方的表单，然后关闭了 section 标签。打开一个新的部分标签和一个新的表单标签，实际上创建了第二个表单，这是不需要的。

如果有人可以请建议如何获取一堆像上面的输入字段以内联块方式显示，这将是很棒的。 UL 和 LI 可以去掉，对我来说无所谓。

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

【问题讨论】：

这个答案有帮助吗：stackoverflow.com/questions/12981746/… ?
不。 inertiastreak.com/serial_quilting/order.php这是有问题的页面，您将在底部看到复选框列表

标签： php css checkbox

【解决方案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 as

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

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

【讨论】：

这将如何使复选框出现在一行中，从左到右而不是从上到下？
我不知道什么不起作用。它对我来说很好。您可以减小 #colorSwatches .li_color {float:left; 中的宽度width:70px} 以单行显示所有颜色。
在您的网址中，initialstreak.com/serial_quilting/order.php - contact_order.css - 行号。 33 #contact-form input - 输入类型复选框宽度为 650px。删除它或给 .li_color 输入 {width: 15px;}

【解决方案2】：

对于ul li 列表，使宽度为 100%

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

参考这个DEMO

【讨论】：

这将如何使复选框出现在一行中，从左到右而不是从上到下？
当我在其中添加您的代码时，它不起作用。请参考inertiastreak.com/serial_quilter/order.php 获取相关实际页面。

【解决方案3】：

试试这个css：

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

【讨论】：

好的，所以这个半工作。它能够将带有颜色的复选框放在一条直线上，但是它在复选框和颜色之间放置了巨大的空间，并且在前一个颜色和下一个复选框之间放置了巨大的空间跨度>

【解决方案4】：

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

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

【讨论】：

这没有意义
不好意思，将复选框的浮动设置为左，然后放在每一行之后，