中央に左揃えの水平メニューをフローティングする

Question

親リストの中央にメニューリストを浮かべるのが難しいです。 simplekitchenandbath.com/staging/ 、必要なコードスニペット：

div#wrapper { 
     width:1100px; 
     margin:0 auto; 
     padding:0 0 50px 0; 
    } 

     div#content-main { 
      background-color:#000; 
      width:1024px; 
      margin:0 auto; 
     } 

      nav { 
       background-color:#000; 
       height:30px; 
      } 

       div#nav-container { 
       width:720px; 
       margin:0 auto; 
      } 

ul#nav       { position:relative; } 
ul#nav li      { float: left; zoom: 1; list-style-type:none; margin:0; border-bottom:1px solid #FFF; } 
ul#nav a:hover     { color:#DDD; text-decoration:none; } 
ul#nav a:active    { color:#DDD; } 
ul#nav li a     { display:block; padding:0 10px 0 0; color:#FFF; text-transform:uppercase; } 
ul#nav li:last-child a   { padding-right:0; } 
ul#nav li.hover, ul#nav li:hover { position: relative; } 

Answer 1

div#nav-container { 
    width:575px; 
    margin:0 auto; 
} 

幅は＃1のnav-コンテナの大きすぎるここではページのアドレスです。 575pxに設定してください！ #nav要素の

Answer 2

使用display:inline-block、および#nav-container

Answer 3

上text-align:center幅が小さく作り、要素のコンテナ内中央の場所にそれを合わせると0 autoにそのマージンを設定します。読んで...愛のため

<div class="container"> 
    ... some code ... 
</div> 

css: 
.container { 
    width: 960px; 
    margin: 0 auto; 
} 

感謝を：780pxモニター上のサイトには、それはとても基本的に....水平に行くためのスライダーを持っているので... CSS3メディアクエリと応答ウェブデザインを試してみて、二つの異なるモニタサイズをターゲットに私の答えに何らかの反応を聞く。