Центрирующий элемент <ul>со встроенным списком - PullRequest
Новая
       1

Центрирующий элемент <ul>со встроенным списком

1 голос
/ 16 ноября 2011

Я немного стесняюсь спросить об этом, но я борюсь с центрированием элемента UL внутри DIV. Блок UL содержит встроенные LI.

Это NavMenu на этом сайте: http://dev.gratefulhearttherapy.org/

Я пробовал text-align: center и margin: auto как для элемента UL, так и для его родительского DIV # headerNav и DIV.custom. Никто не работал. 

<div id="headerNav">
<div class="custom">
<ul id="mega-menu-77" class="mega-menu" style="display:none;">
<li class="nav-selected nav-path-selected top-level-nav first il-1"><a class="nav-selected nav-path-selected pl-1" href="/" accesskey="H">Home</a></li>
<li class="top-level-nav il-72"><a href="/services/psychotherapy/" class="pl-72" accesskey="S">Services</a><ul class='sub_menu pid-72'><li class=" il-88"><a href="/services/psychotherapy/" class="pl-88" accesskey="P">Psychotherapy</a></li>
<li...> ... </li>
<li...> ... </li>
<li...> ... </li>
</ul>
</div>

Было бы сложно скопировать CSS, так что вот прямой файл: http://dev.gratefulhearttherapy.org/index.php/tools/css/themes/gratefulheart/typography-new2.css, хотя вы бы лучше понимали его, используя Firebug или Chrome Inspector.

Большое спасибо за то, что вы поняли или можете привести меня к решению !!

Olivier

Ответы [ 2 ]

1 голос
/ 16 ноября 2011

Вкл. .custom ul.mega-menu li, измените float: left на display: inline-block.

. После этого li s будет отцентрирован, благодаря text-align: center, который имеется у родителя ul.

Вам также необходимо добавить display: block к .custom ul.mega-menu li .sub li.

0 голосов
/ 16 ноября 2011

Если вы хотите центрировать элемент блока, попробуйте следующее: 

width:980px;
margin:0 auto;

980px можно изменить на любое значение.

Кроме того, не забудьте очистить поплавок(ищите "clearfix" в Google).

...