浮動中間的左對齊水平菜單

我很難獲得菜單列表浮動在它的父容器的中心。這裏是頁面的地址：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; }

來源

2012-02-08 Angry Spartan

表達式「漂浮在中心」毫無意義。你可以向左或向右浮動。 – elclanrs 2012-02-08 01:58:39

margin：0 auto;允許在任何容器的中心浮動。 – 2012-02-08 03:15:13

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

寬度上＃導航容器太大。將其設置爲575px！

來源

2012-02-08 01:58:41 thisisablock

#nav所述元件上的使用display:inline-block，和text-align:center在#nav-container

來源

2012-02-08 02:00:34

使寬度小，並對齊在中心處它的元件的容器內，並設置其餘量0汽車;試着用CSS3媒體查詢和定位兩個不同的顯示器尺寸...響應的網頁設計，因爲780px監視器上它具有滑塊現場水平走....所以基本上是：

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

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

感謝您閱讀...愛聽到我對答案的回覆。

來源

2012-02-08 02:31:29 mkuk

你說的不得不減小容器的大小，但你沒有指定哪一個。 – 2012-02-08 03:21:33

浮動中間的左對齊水平菜單

回答

相關問題