0

好的，让我重新表述一下。我有一个表单，我有复选框，它们当前垂直显示，我需要它们水平显示。表单被包裹在一个section标签中。我将 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。

4

4 回答 4

1

试试这个CSS：

#colorSwatches li{
    display: inline;
}
#colorSwatches{
    white-space: nowrap;
}
于 2013-08-06T05:03:02.350 回答
1

以 class="li_color" 为 li 提供类。

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

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

于 2013-08-06T04:42:13.163 回答
1

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

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

参考这个演示

于 2013-08-06T04:44:01.023 回答
0

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

<div style="clear:both"></div>
于 2013-08-06T04:48:49.843 回答