"清除:两者"的最佳方式

Question

很长一段时间以来,我一直在使用一个名为CSS的类clear,它只有规则clear: both.我以下面的方式使用它(以Django语法显示,但它不重要):

{% for item in collection %}
  <ul class="horiz"><!-- horizontal list -->
    <li>{{ item }}</li>
    <li>{{ item }}</li>
  </ul>
  <div class="clear"></div>
{% endfor %}

正如你所看到的,我正在做一堆水平列表,使它看起来就像一张桌子.想象一下CSS规则.horiz li意味着什么float: left.请注意,我<div class="clear"></div>在这个"表"中的每一行之后使用,很多HTML用于这么简单的事情.

这真的是要走的路吗？我有没有想过更简单的东西？

Answer 1

有可能在CSS中做到这一点

http://www.positioniseverything.net/easyclearing.html

    #pages ul li {
        display: block;
        float: left;
        .......
    }


    #pages ul:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

Answer 2

有没有理由你不能使用......

<ul class="horiz clear">

...除了第一个之外的每个列表？

Answer 3

如果您希望每个列表都显示其中的内容,而无需添加填充DIV标记,则可以使用以下方法调整overflow列表的属性:

.horiz
{
   overflow:hidden;
}

现在,即使列表项本身是浮动的,列表的内容也应该显示而不会像现在一样折叠区域,因为它们已经移出流程.