16
我试图创建水平显示的列表(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>
。
当我把它放入编辑器并在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