Margin auto кошмар

Опитах всички начини, за които се сетя, но за живота си не мога да разбера защо навигационното меню не се центрира. Опитах подравняване на текст, автоматичен марж, блокиране на дисплея... И на родител, и на дете. Сигурен съм, че е нещо изключително просто, но това започва да причинява косопад.

Демото е достъпно тук:

Ако искате да видите някакъв код, ето 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 и работи добре. - 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

За да зададете полета на автоматично, трябва да посочите ширина и да покажете елемента като блок.

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
Същото като каза Брад по-горе. Не използвайте inline float, освен ако не завършите блока другаде. Настройте списъка така, че 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 и следователно не може да бъде центриран. Правейки го около 500px широк ще реши проблемите.

Ако искате да центрирате основната навигация вместо навигацията, трябва да премахнете float:left; от него и да му дадете фиксирана ширина и margin: auto;

person Benjamin Udink ten Cate    schedule 05.12.2011