проблема с центрированием навигации по горизонтали в UL

Question

проблема с центрированием навигации по горизонтали в UL

0

Кажется, что элементы списка застряли на левой стороне UL, независимо от того, какой размер я им делаю. Он выглядит в центре на некоторых экранах, но не на больших. Float: право было единственным, что работает для моего размера экрана, но оно не остается центрированным, если вы измените размер окна.

Сайт: http://www.lotusroomofboca.com/

HTML:

<div id="header">
<img id="logo" src="images/logo.png" alt="Lotus Room logo">
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="our_tea.html">Our Tea</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="learn_more.html">Learn More</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

CSS:

#header {position:fixed; 
     width:100%;
     background-color:rgba(244,243,243,1);
     z-index:100;
     -webkit-box-shadow: 0px 10px 60px 0px rgba(219,219,216,0.94);
     -moz-box-shadow: 0px 10px 60px 0px rgba(219,219,216,0.94);
     box-shadow: 0px 10px 60px 0px rgba(219,219,216,0.94);
    }     

#nav {list-style:none;
      margin:auto;
      text-align:center;
      width:960px;
      padding-top:30px;
      padding-bottom:20px;
      float:right;}

#nav a {text-decoration:none;
      text-align:center;
      display:block;
      color:#5c5c5c;
      font-family:'Avenir';
      font-size:12px;
      border-right:thin grey solid;
      float:left;
      width:10%;
      } 

#nav li:last-child a {border-right:none;}     

#nav a:hover {color:#7b8c6f; 
              transition:ease 0.5s;}

Marissa 18 дек. 2013, в 03:01

Источник

Теги:

html

css

nav

2 ответа

1

сначала попробуйте добавить

#nav a {
   margin: 0 auto;
}


#nav a {
  display: inline-block; //instead of block
  float: left;  //remove this too
}

CRABOLO 18 дек. 2013, в 00:45

Ещё вопросы

mdesdev · Accepted Answer · 2013-12-18T00-07-00.000Z

Здесь FIDDLE

Используйте эту конфигурацию для <ul>

<ul id="nav">
  <li><a href="index.html">Home</a>
  </li><li><a href="our_tea.html">Our Tea</a>
  </li><li><a href="menu.html">Menu</a>
  </li><li><a href="learn_more.html">Learn More</a>
  </li><li><a href="contact.html">Contact</a>
  </li>
</ul>

и этот css

#nav li {
  text-align:center;
  display:inline-block;
  color:#5c5c5c;
  font-family:'Avenir';
  font-size:12px;
  border-right:thin grey solid;
  width:10%;
}
#nav li:last-child {
  border-right: none;
} 
#nav li a {
  text-decoration: none;
  color: #000;
  transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -webkit-transition: color 0.5s ease;
}
#nav li a:hover {
  color:#7b8c6f;
}

Кажется, это сработало; как я могу изменить ссылки обратно на черный в Firefox, хотя?
Я обновил скрипку #nav li a { text-decoration: none; color: #000; transition: color 0.5s ease; } #nav li a:hover { color:#7b8c6f; } также #nav li:last-child { border-right: none; }