導航欄不會居中

Question

好的，所以過去兩天我一直在嘗試解決此問題，但找不到解決方案。 我正在嘗試使用asp.net創建一個站點，並試圖將導航欄居中。 現在，它幾乎居中，我唯一的問題是導航欄的左側有一個縫隙，下面是一張圖片： 我幾乎嘗試了所有方法，包括更改浮動樣式，顯示，填充，邊距和文本縮進，但沒有任何效果。 有人可以幫忙嗎？ 謝謝。

 nav { font-family:'Electrolize',sans-serif; font-size: 0.7em; height: 60px; margin: 0px auto; padding: 0; position: relative; width: 70%; } nav ul li { background-color: rgb(192, 64, 0); border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; -o-border-radius:10px 10px 0 0; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset; -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset; -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset; -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset; color:#eee; float: left; list-style:none; margin-left: 0 !important; padding: 0; text-align: center; text-indent: 0; text-decoration:none; transition:all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; vertical-align: baseline; width: 20%; } 

 <form id="form1" runat="server"> <div> <header> <img class="headerImg" runat="server" src="~/Resources/header_1.png" /> </header> <nav> <ul> <li><a href="home.aspx" >Home</a></li> <li><a href="#" >About Us</a></li> <li><a href="#" >Policies</a></li> <li><a href="#" >FAQ's</a></li> <li><a href="#" >Contact Us</a></li> </ul> </nav> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder> </div> </form> 

Answer 1

向ul添加填充0（零）

 nav { font-family:'Electrolize',sans-serif; font-size: 0.7em; height: 60px; margin: 0px auto; padding: 0; position: relative; width: 70%; } nav ul{ padding: 0px; } nav ul li { background-color: rgb(192, 64, 0); border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; -o-border-radius:10px 10px 0 0; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset; -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset; -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset; -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset; color:#eee; float: left; list-style:none; margin-left: 0 !important; padding: 0; text-align: center; text-indent: 0; text-decoration:none; transition:all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; vertical-align: baseline; width: 20%; } 

 <form id="form1" runat="server"> <div> <header> <img class="headerImg" runat="server" src="~/Resources/header_1.png" /> </header> <nav> <ul> <li><a href="home.aspx" >Home</a></li> <li><a href="#" >About Us</a></li> <li><a href="#" >Policies</a></li> <li><a href="#" >FAQ's</a></li> <li><a href="#" >Contact Us</a></li> </ul> </nav> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder> </div> </form>