包含不重疊的水平列表

我試圖創建水平顯示的列表（UL）。每個項目都有一些填充。我遇到的問題是，當列表到達行尾並開始換行到下一行時，它不足夠低，並開始重疊第一行。有人可以幫我弄清楚如何讓包裝繼續下一行而不重疊？包含不重疊的水平列表

這裏的CSS

.letterlist ul { 
    margin: 0; padding: 0; 
    list-style-type: none; list-style-image: none; 
} 

.letterlist li 
{ 
    display:inline; 
} 

.letterlist li a 
{ 
    margin: 4px; 
    color:#eee; 
    padding: 10px 20px; 
    background:#3c66ad; 
    font-size:16px; 
    font-weight: bold; 
    border-radius: 5px; 
}

下面是我用的藍圖CSS如果該事項的HTML

<p> 
<ul class="letterlist"> 
    <li><a href="/list/A">A</a></li> 
    <li><a href="/list/B">B</a></li> 
    <li><a href="/list/C">C</a></li> 
    <li><a href="/list/D">D</a></li> 
    <li><a href="/list/E">E</a></li> 
    <li><a href="/list/F">F</a></li> 
    <li><a href="/list/G">G</a></li> 
    <li><a href="/list/H">H</a></li> 
    <li><a href="/list/I">I</a></li> 
    <li><a href="/list/J">J</a></li> 
    <li><a href="/list/K">K</a></li> 
    <li><a href="/list/L">L</a></li> 
    <li><a href="/list/M">M</a></li> 
    <li><a href="/list/N">N</a></li> 
    <li><a href="/list/O">O</a></li> 
    <li><a href="/list/P">P</a></li> 
    <li><a href="/list/Q">Q</a></li> 
    <li><a href="/list/R">R</a></li> 
    <li><a href="/list/S">S</a></li> 
    <li><a href="/list/T">T</a></li> 
    <li><a href="/list/U">U</a></li> 
    <li><a href="/list/V">V</a></li> 
    <li><a href="/list/W">W</a></li> 
    <li><a href="/list/X">X</a></li> 
    <li><a href="/list/Y">Y</a></li> 
    <li><a href="/list/Z">Z</a></li> 
</ul> 
</p>

。

來源

2011-01-23 ajma

當我把它放入編輯器並在Firefox中查看它時，我沒有看到問題。你在瀏覽什麼瀏覽器？（另外，我認爲你打算將第一個樣式設置爲ul.letterlist - as .letterlist ul，它會查找ul元素，它是.letterlist類的子元素。） – Arkaaito 2011-01-23 08:44:57

我正在使用Chrome。我使用Firefox 3.6.8時遇到同樣的問題。 – ajma 2011-01-23 08:47:49

您可以浮動所有li元素，或給他們display: inline-block，然後給他們一些頂部和底部邊距：

.letterlist li { 
    float: left; 
     /* or */ 
    display: inline-block; 

    margin: 20px 0; 
}

參見：http://www.jsfiddle.net/yijiang/z8Gfe/一個簡單的例子。順便說一句，ul元素無效p段落

來源

2011-01-23 08:44:35

包含不重疊的水平列表

回答

相關問題