同一高度李

我創建了UL A muticolumn同一高度李

的HTML：

<ul> 
    <li>Antelope</li> 
    <li>Bison</li> 
    <li>Camel</li> 
    <li>Deer</li> 
    <li>Eland</li> 
    <li>Gazelle</li> 
</ul>

的CSS：

ul { 
    float: left; 
    width: 12em; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li { 
    float: left; 
    width: 6em; 
    margin: 0; 
    padding: 0; 
}

現在，如果我加入第二鋰一些文字（或第二列中的任何li）整行將自動調整大小（行大小的高度）。但是如果我在第一個li中添加更多的文本（或者第一個列中的任何li），則整行不會調整大小。

如果在任何li中添加或減少文本，我想要調整整行的大小。

我上面的代碼複製從this link.你可以看到UL列如何將多個工作

來源

2011-03-29 SMUsamaShah

你可以顯示多列的所有代碼嗎？我無法理解多列無序列表是什麼。 – JackWilson 2011-03-29 14:53:17

你的意思是「整行自動調整大小」是什麼意思？無論裏面的內容如何，每個「li」都將是「6em」寬。 – thirtydot 2011-03-29 14:57:07

我認爲他意味着'行'的高度調整。 – Gareth 2011-03-29 15:57:14

也許添加：

li:nth-child(odd){clear:left;}

你的CSS？

（這個假設你只會想要2列）

來源

2011-03-29 14:54:38 Gareth

它工作，謝謝。我有2列在我的情況，但如果我有3列？ – SMUsamaShah 2011-03-30 06:29:58

僅適用於CSS3嗎？ – SMUsamaShah 2011-03-30 07:00:56

我有兩列顯示產品及其信息（圖片，價格等）的問題。他們都在DIV中，我認爲ul和li會解決我的問題，但是在DIV上使用上面的方法解決了整個問題 – SMUsamaShah 2011-03-30 07:02:42

回答

相關問題