「明確：兩種」的最佳方式

長期以來，我一直在使用名爲clear的CSS類，它只有規則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都是這麼簡單的。

這真的是要走的路嗎？有沒有更簡單的，我只是沒有想過？

來源

2009-08-06 Deniz Dogan

這是一個愚蠢的問題，但你可以將佈置的東西視爲表格數據嗎？ – 2009-08-06 11:16:37

我知道這是封閉的，但我的答案（只是搜索了一個類似的問題，發現這個頁面是一個容器與溢出汽車：http://www.quirksmode.org/css/clearing.html – Jon 2012-07-24 13:42:51

有不能使用的理由......

<ul class="horiz clear">

...對於除了每個列表第一？

來源

2009-08-06 09:22:49 Amber

是的，這很醜陋，我不確定使用這些代碼會更容易理解 – 2009-08-06 09:24:27

它究竟是「醜陋」？CSS的設計目的是爲了 – Amber 2009-08-06 09:27:04

這不是生成的醜陋的HTML，而是使用Django的模板系統進行條件檢查 – 2009-08-06 09:27:48

有辦法做到這一點在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; 
    }

來源

2009-08-06 09:21:57 ymv

是的，如果OP不在乎關於IE6或7，因爲：after不起作用 – 2012-02-20 10:54:25

最明顯的解決方案是將clear: both移動到佈局中的下一個元素。如果這ul被後面是div，給那div一個class="clear"等

來源

2009-08-06 09:24:00 10goto10

如果希望每個列表的顯示無論是在他們，而無需添加填料DIV標籤，你可以調整overflow與此列表中的屬性：

.horiz 
{ 
    overflow:hidden; 
}

現在，即使列表項本身是浮動的，列表中的內容應顯示沒有倒塌，因爲他們現在也許這樣做是因爲他們被移出流動的區域。

來源

2009-08-06 09:24:42 random

把清除放在ul。

來源

2009-08-06 09:29:18

爲什麼不給你的UL和你的LI固定寬度，其中UL的寬度至少是LI的寬度的兩倍，但小於LI的寬度的3倍。

然後你可以把你所有的LI放在一個UL中，並把一個float: left放在LI上。

這將導致每個列表項出現在彼此的旁邊，但當它們用完房間時（由於UL的寬度），它們將換行到下一行。

來源

2009-08-06 09:29:40

很酷的想法，我實際上使用了類似於我的頁面另一部分的方法，這應該看起來像一個日曆，每個浮動元素是一個「日」。 – 2009-08-06 09:31:23

另一個建議。您可以使用清除：在「中斷（<br/>）」標記中。不需要在div中編碼。請參見下面的

編碼CSS：

.clear { 
    clear:both; 
    height:0; 
    font-size: 1px; 
    line-height: 0px; 
}

使用HTML是：

<br class="clear" />

嘗試！

來源

2009-08-06 11:07:48

它不適合我.......：| – enam 2011-05-08 17:27:58

我同意Logesh Paul，它變得更簡單，使用br而不是div。

但我認爲你應該把清晰的元素放在循環之外。

來源

2009-08-06 14:52:01

您可以讓您的ul與overflow: hidden;。這爲每個ul建立了一個新的block formatting context，這正是你想要的。

我曾經像clear: both;一樣，但是一旦我發現了這個奇怪的小怪癖，我已經開始幾乎全部使用它了。它在語義上似乎更勝一籌，在99％的案例中起作用。

來源

2010-10-13 17:27:47

「明確：兩種」的最佳方式

回答

相關問題