CSS無序列表對齊

我周圍搜索，發現了很多關於這個問題的問題，但沒有我試過的答案似乎在我的情況下工作。所以我有一個無序的列表中的導航標籤，我希望列表中心相對於父導航標籤。但是，無論我嘗試什麼，列表總是有點偏右，從不在中心。CSS無序列表對齊

HTML非常直截了當：

<nav> 
<ul> 
    <li>MENU</li> 
    <li><a href="">Opt 1</a></li> 
    <li><a href="">Opt 2</a></li> 
    <li><a href="">Opt 3</a></li> 
</ul> 
</nav>

這是迄今爲止CSS：

nav { 
float: left; 
width:15%; 
margin: 0; 
padding:0; 
background:gray; 
text-align:center; 
} 
nav ul { 
list-style-type: none; 
color:blue; 
}

任何想法如何，我能得到這個工作？

來源

2017-02-04 Bai Huku

試試這個

nav ul { 
list-style-type: none; 
padding: 0; 
margin: 0; 
}

來源

2017-02-04 14:47:21 jonask

這完全工作！非常感謝！完全忘記了填充和邊距...：D –

很高興我能幫上忙。請回答正確的答案:) – jonask

這是因爲ul有padding和margin默認的瀏覽器應用到它，你需要將其刪除

nav { 
 
    float: left; 
 
    width: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: gray; 
 
    text-align: center; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
    color: blue; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<nav> 
 
    <ul> 
 
    <li>MENU</li> 
 
    <li><a href="">Opt 1</a> 
 
    </li> 
 
    <li><a href="">Opt 2</a> 
 
    </li> 
 
    <li><a href="">Opt 3</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2017-02-04 14:49:36

測試此：

<nav> 
     <ul> 
      <li>MENU</li> 
      <li><a href="">Opt 1</a></li> 
      <li><a href="">Opt 2</a></li> 
      <li><a href="">Opt 3</a></li> 
     </ul> 
</nav> 

nav { 
    display:table; 
    margin:0 auto; 
    padding : 10px; 
}

來源

2017-02-04 15:03:42

CSS無序列表對齊

回答

相關問題