CSS定心兒童，無論填充/保證金的

Question

基本上，我有這個網站：

http://www.ug.it.usyd.edu.au/~sgre9702/week3/dropDownMenu/semantics.html

我想中心的導航欄上的下拉列表中的項目，我知道我可以居中：

left:-11px; 

但是，我不想使用我已計算的值。相反，我希望它自動居中，並考慮邊距/填充值。我不知道在google搜索一下之後這是否可能。

我的相關的HTML代碼是：

<nav> 
    <ul id="nav"> 
     <li><a href="">Tours</a> 
      <ul> 
       <li><a href="">New South Wales</a> 
       <li><a href="">Australian Capital Territory</a> 
       <li><a href="">Queensland</a> 
       <li><a href="">Western Australia</a> 
       <li><a href="">Northen Territory</a> 
       <li><a href="">Tasmania</a> 
       <li><a href="">South Australia</a> 
       <li><a href="">Victoria</a> 
      </ul> 
     <li><a href="">Attractions</a> 
     <li><a href="">Food</a> 
     <li><a href="">Resources</a> 
     <li><a href="">About</a> 
     <li><a href="">Contact</a> 
      <ul> 
       <li><a href="">Online</a> 
       <li><a href="">Phone</a> 
       <li><a href="">Facimile</a> 
      </ul> 
    </ul> 
</nav> 

，相關的CSS：

/* general nav list */ 
nav ul li { 
    background-color: #EEEEEE; 
    border-color: #000000; 
    border-style: solid; 
    border-width: 1px; 
    display: inline-block; 
    margin: 0px 5px; 
    padding: 5px; 
    position: relative; 
    text-align: center; 
    width: 120px; 
} 

/* nav sub list */ 
nav ul li ul { 
    display: none; 
} 

/* nav sub list shown */ 
nav ul li:hover ul { 
    display: block; 
    width: 142px; 
    position: absolute; 
    list-style-type: none; 
} 

/* nav sub list shown - list item */ 
nav ul li:hover ul li { 
    display:block; 
    background-color: #AACCFF; 

    border: solid 1px #000000; 
    position: relative; 

    /*left:-11px;*/ 
} 

Answer 1

從UL> li元素取出填充，並適用於錨定器本身（他們將需要顯示：塊）。刪除子li元素的邊距

然後給孩子ul寬度：auto。子菜單塊仍然會向右偏移1px，因爲它的左邊緣將從其父邊界的左邊界結束。您可以通過替換沒有輪廓的邊框（不影響主機元素的寬度），將邊框放在子錨/ li元素上，或者最後在子UL上嘗試左邊的-1px值來解決這個問題。