Не удается получить элементы списка для выравнивания по горизонтали - PullRequest
Новая
       26

Не удается получить элементы списка для выравнивания по горизонтали

0 голосов
/ 16 мая 2011

Я пытаюсь создать горизонтальную панель навигации, но элементы списка для меня не будут выстраиваться.Кто-нибудь может увидеть, что я мог сделать неправильно?

Вот 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 (пробовал оба отображения: inline и float: left):

.custom ul.submenu {margin: 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/

Спасибо!

1 Ответ

1 голос
/ 16 мая 2011

В вашем CSS есть следующая строка (custom.css, строка 130): 

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

Это переопределяет float в элементах списка и вызывает поведение, которое вы видите.

...