1

このナビゲーション バーを中央に配置する最良の方法は何ですか?

追加すれば中心にできることを知っています

#nav ul {
  margin:0 auto; 
  width:720px;
}

または、 を削除widthして追加paddingして#navも、ナビゲーション バーに別の項目を追加する必要がある場合は、番号を変更する必要があるため、これらのどれも正しくないようです。何か案は?

これは私がこれまでに持っているコードです:

#nav { 
   background:url(../images/nav-background.jpg) repeat-x;
   height:50px;
   width:960px;
   text-transform:uppercase;
   position:fixed;
}

#nav ul li {
   display: table-cell;
   vertical-align:top;
   line-height:3.8em;
}


#nav li {
   display:inline;
   font-family: 'Philosopher', sans-serif;
   font-size:0.9em; 
   letter-spacing:0.1em;
   font-weight:700;
}

#nav li a { 
   color:#848484;
   text-decoration:none;
   padding:5px 8px;
}

#nav li a:hover {
   color:#fff;
   background-color:#636566;
}

.nav-separator {
   padding:0 2px;
}
#nav .logo a:hover {
  background:none;
}

  <div id="nav">
        <ul>
            <li><a href="lourenco.php">Lourenço</a><img class="nav-separator" src="images/nav-separator.jpg" /></li>
            <li><a href="areas-de-atuacao.php">Áreas de Atuação</a></li>
            <li class="logo"><a href="index.php"><img src="images/logo-lourenco-advogados.png" /></a></li>
            <li><a href="clientes.php">Clientes</a><img class="nav-separator" src="images/nav-separator.jpg" /></li>
            <li><a href="noticias.php">Notícias</a><img class="nav-separator" src="images/nav-separator.jpg" /></li>
            <li><a href="contato.php">Contato</a></li>
        </ul>
  </div>
4

2 に答える 2

1

試す:

 #nav {
    text-align: center;
 }    
#nav ul li {
    display: inline-block;
 }
于 2013-02-15T10:53:14.133 に答える
1

以下を使用できます。

min-width: Apx; /* any value */
width: auto;
margin:0 auto;
于 2013-02-15T10:46:24.370 に答える