Маржинальный авто кошмар

Я пробовал все, что мог придумать, но хоть убей, я не могу понять, почему меню навигации не центрируется. Я пробовал text-align, margin-auto, block display... Как на родительском, так и на дочернем уровне. Я уверен, что это что-то очень простое, но это начинает вызывать выпадение волос.

Демонстрация доступна здесь:

Если вы хотите увидеть код, вот HTML:

<div id="navigation" class="col-full">

<ul id="main-nav" class="nav fl">

  <li id="menu-item-266" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-266"><a href="http://previews.tinygiantstudios.co.uk/">Home</a></li>
  <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://previews.tinygiantstudios.co.uk/about-us/">About Us</a></li>
  <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://previews.tinygiantstudios.co.uk/news/">News</a></li>
  <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://previews.tinygiantstudios.co.uk/contact/">Contact</a></li>

</ul>   
</div><!-- /#navigation -->

И CSS

#navigation {
  margin-bottom: 0px;
  background-color: #131313;
  border-top: 0px solid #DBDBDB;
  border-bottom: 0px solid #DBDBDB;
  border-left: 0px solid #DBDBDB;
  border-right: 0px solid #DBDBDB;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  font: 14px/14px sans-serif;
  padding: 10px 0;
}

.nav {
  z-index: 99;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
  margin-left: 10px;
}

.fl {
  float: left;
}

.nav li {
  float: left;
  width: auto;
}

Может ли кто-нибудь показать мне, что мне не хватает?

Спасибо,


html css center margin xhtml
person Tiny Giant Studios    schedule 05.12.2011    source источник
comment
Это милый дизайн. Просто подумал, что вы хотели бы знать.   -  person Blender    schedule 05.12.2011

Ответы (5)


arrow_upward
3
arrow_downward

Добавьте этот код в свой CSS:

.nav {
  text-align: center;
  width: 100%;
}

.nav li {
  float: none;
  display: inline-block;

  /* IE7 should be pleased */
  zoom: 1;
  *display: inline;
}

Это не будет работать со старыми версиями IE (inline-block), но что будет?

person Blender    schedule 05.12.2011
comment
Похоже, это не работает с предоставленной тестовой страницей, и я не понимаю, почему это так или иначе. - person Andrew Marshall; 05.12.2011
comment
Действительно? Я сделал это с помощью Chrome Inspector, и это сработало нормально. - person Blender; 05.12.2011
comment
@Blender Странно, я пробовал и в Chrome, но не смог заставить его работать. Да ладно, наверное, значит, пора немного поспать. - person Andrew Marshall; 05.12.2011
comment
@TinyGiantStudios: я поменял свой код секунду назад. Попробуйте вставить этот код в конец файла CSS. (Я отрицал ваше float). - person Blender; 05.12.2011
comment
Хорошо, спасибо. Только что внес изменения, вроде работает. Любая идея, что можно сделать для IE7? - person Tiny Giant Studios; 05.12.2011

arrow_upward
1
arrow_downward

Чтобы установить для полей значение auto, вам нужно указать ширину и отобразить элемент как блок.

person Brad    schedule 05.12.2011
comment
Я тоже так думал изначально, но, похоже, это не работает на предоставленной тестовой странице. - person Andrew Marshall; 05.12.2011
comment
@AndrewMarshall, я только что сам протестировал его в Chrome, и он отлично работает. - person Brad; 05.12.2011
comment
Хм, я пытался и не смог заставить его работать. Ну что ж, наверное, значит, пора дать моему мозгу отдохнуть и поспать. - person Andrew Marshall; 05.12.2011

arrow_upward
0
arrow_downward

Установка поля на ноль/автоматически работает только с блочными элементами фиксированной ширины. Удалите встроенный поплавок, чтобы он вступил в силу.

person jmkeyes    schedule 05.12.2011
comment
Не уверен, что понимаю - я попробовал то, что вы предложили (по крайней мере, я думаю, что сделал), но это не работает... У вас есть какой-нибудь код, который я должен попробовать? - person Tiny Giant Studios; 05.12.2011
comment
То же самое, что Брэд сказал выше. Не используйте встроенный поплавок, если вы не завершаете блок в другом месте. Установите список так, чтобы ul заканчивался с левым/правым полем, установленным на auto, и задайте для него фиксированную ширину. - person jmkeyes; 05.12.2011

arrow_upward
0
arrow_downward

Для центрирования с помощью margin: 0 auto; ваш элемент должен быть display: block;, иметь фиксированную ширину и не может плавать с помощью float.

Поэтому вам нужно удалить класс fl из вашего <ul> и присвоить ему фиксированную ширину.

person Strelok    schedule 05.12.2011

arrow_upward
0
arrow_downward

Вы должны указать ширину для #navigation или #main-nav

Прямо сейчас #navigation охватывает всю ширину #wrapper и, следовательно, никогда не может центрироваться. Если сделать его шириной около 500 пикселей, проблемы будут устранены.

Если вы хотите центрировать основную навигацию вместо навигации, вы должны удалить ее float:left; и присвоить ей фиксированную ширину и margin: auto;

person Benjamin Udink ten Cate    schedule 05.12.2011