如何將 HTML 中的列表項居中

Question

我試圖從一個簡單的網站開始，我想知道如何修復我的導航欄，因為我不小心弄亂了我的代碼，使其處於未對齊狀態。 我似乎已經正確檢查了我的 CSS，但我沒有發現它有任何問題。

根據我所做的，我再次檢查以確保我記得關閉我的標簽並檢查 CSS。

 #mainnav { margin: 0 auto; padding: 0; text-align: center; } #mainnav ul { display: inline-block; list-style: none; } #mainnav ul li { float: left; margin: 0px 20px 0px 0px; /* spacing in-between the boxes */ padding: 10px 20px 10px 20px; /* spacing inside the boxes */ }

 <nav> <div id="mainnav"> <ul> <li><a href="index" class="nav-home">HOME</a></li> <li><a href="about-me.html" class="nav-about-me">ABOUT ME</a></li> <li><a href="vpnhole.html" class="nav-vpnhole">VPNHOLE</a></li> <li><a href="projects.html" class="nav-projects">PROJECTS</a></li> <li><a href="misc.html" class="nav-misc">MISC.</a></li> </ul> </div> </div> </nav>

我希望導航鏈接的輸出對齊，其中一個鏈接與網站中的圖片對齊，但實際輸出結果偏離了幾厘米。

Answer 1

如果我正確理解了任務 - 它應該會有所幫助

ul{
    padding: 0;
}