Question

我正在尝试创建一个水平导航栏，但list-items不会为我排队。谁能看到我可能做错了什么？

这是html（复杂的结构，因为它是Wordpress论文主题+用于字体替换的Cufon）：

<ul class="menu"> 
<li class="tab tab-home"><a href="http://ecgd.handsupstaging.com">Home</a></li> 
<li class="tab tab-1 current"><a href="http://ecgd.handsupstaging.com/about/"         title="About">About<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-1"><a href="http://ecgd.handsupstaging.com/about/subnavigation-page/" title="Subnavigation page">Subnavigation page</a></li> 
<li class="item item-2"><a href="http://ecgd.handsupstaging.com/about/sub-page/" title="Sub-page">Sub-page</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="tab tab-2"><a href="http://ecgd.handsupstaging.com/blog/" title="Blog">Blog<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-3"><a href="http://ecgd.handsupstaging.com/blog/another-sub-page/" title="Another sub-page">Another sub-page</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
</ul>

和css（尝试显示：内联和浮动：左）：

.custom ul.submenu { 保证金：0px 0 0 0; }

.custom ul.submenu a {
font-size: 1.3em;
text-transform: none;
}

.custom ul.menu li ul.submenu li.item {
display: none;
}

.custom ul.menu li.current ul.submenu {
width: 500px;
}

.custom ul.menu li.current ul.submenu li.item {
display: inline;
white-space: nowrap;
float: left;
}

.custom ul.menu li.current ul.submenu li.item  a {
background-color: transparent;
display: inline;
float: left;
}

指向该网页的链接：http://ecgd.handsupstaging.com/about/

谢谢！

Answer 1

CSS中有以下行（custom.css，第130行）：

.custom .menu ul li { clear: both; }

这会覆盖列表项上的浮动并导致您看到的行为。

无法使列表项水平排列

1 个答案: