Я озадачился чем-то, что должно быть очень просто, но после бесплодных трех часов я еще не решил:
Друг попросил меня исправить шаблон его веб-сайта WordPress, чтобы горизонтальная панель меню навигации была горизонтально расположена на странице. Он хочет, чтобы он плотно прилегал к нижней части красной секции - тогда он просто поместился между двумя эмблемами по обе стороны от красной страницы.
Красная секция (class="header") имеет text-align, установленную на center. Это кажется достаточно хорошим, чтобы гарантировать, что заголовок и текст описания под ним выравниваются по центру, но по какой-то причине я не могу сделать меню (которое является ul) совпадающим с центром страницы.
Кто-нибудь хотел бы предположить, что я делаю неправильно? Почему я не могу получить меню в центре? Что мне нужно изменить в стиле, чтобы заставить его работать?
Чтобы центрировать ряд блоков, вы должны использовать встроенный блок:
ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }
IE не понимает встроенный блок, но если вы установите его в строке только для IE, он все равно будет вести себя как встроенный блок:
<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->
1 Напишите style="text-align: center;" в родительский div из ul
2 Запишите style="display: inline-table;" в ul
2 Напишите style=" display: inline;" - li
<div class="menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
</div>
<style>
.menu { text-align:center; }
.menu ul { display:inline-table;}
.menu ul li {display:inline;}
</style>
Готово
Лучший способ сделать это:
Оберните ul в новый div id = "topmenu" или что-то в этом роде, затем дайте следующие стили
bottom:0;
position:absolute;
width:780px;
и дать ul.menu это
margin:0 auto;
width:535px;
Единственная проблема заключается в том, что вы устанавливаете ширину списка меню, поэтому, если ширина элементов меню изменится, ее также необходимо будет изменить в файле CSS (т.е. при добавлении нового элемента меню).
ОБНОВЛЕНИЕ: Просто заметил ваш комментарий выше о том, чтобы не устанавливать ширину вручную. Если вы захотите использовать небольшой бит javascript, вы можете вставить его внутри готового блока документа и удалить width: 535px;
var sum = 0; jQuery('.menu').children().each(function() { sum += jQuery(this).outerWidth(); }); jQuery('.menu').css('width', sum + 30);
Это установит свойство ширины css в фактическую отображаемую ширину после загрузки страницы, поэтому макет будет работать.
Выполните HTML-код ниже:
<div id="header">
<h1 class="blog-title"><a href="http://www.hootingyard.org/" accesskey="1">Hooting Yard</a></h1>
<p class="description">A Website by Frank Key</p>
<div id="topmenu">
<ul class="menu">
<li class="current_page_item"><a href="http://www.hootingyard.org/" title="Prose, etc">Prose, etc</a></li>
<li class="page_item page-item-533"><a href="http://www.hootingyard.org/archivepage" title="Archives">Archives</a></li>
<li class="page_item page-item-534"><a href="http://www.hootingyard.org/books" title="Books">Books</a></li>
<li class="page_item page-item-551"><a href="http://www.hootingyard.org/regarding-mr-key" title="Regarding Mr Key">Regarding Mr Key</a></li>
<li class="page_item page-item-1186"><a href="http://www.hootingyard.org/subscriptions" title="Subscriptions">Subscriptions</a></li>
<li class="admintab"><a href="http://www.hootingyard.org/wp-login.php?action=register">Register</a></li>
</ul>
</div>
</div>
указанная ширина для ul
ul{ width:700px; margin:0 auto;}
Поскольку он позиционируется как абсолютный, вы можете дать ему левый атрибут:
.menu {left: 125px; }
125 пикселей или около того должны быть хорошими