如何將我的導航中心導航到我的導航中

Question

我確定這是一個非常簡單的修復程序，我在某處出錯了。正如你所看到的，我還沒有添加實際的鏈接。

CSS：

nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border-top: 1px solid #3f3f3f; 
    border-bottom: 1px solid #000000; 
    background-color: #000000; 
    -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 17, 17, 1); 
    -moz-box-shadow: 0px -1px 0px 0px rgba(0, 17, 17, 1); 
    box-shadow:   0px -1px 0px 0px rgba(0, 17, 17, 1); 
} 

nav li { 
    float: left; 
    margin: 0 auto; 
} 

nav li a { 
    display: block; 
    color: #ededed !important; 
    font-family:'Tahoma','Verdana','Arial',sans-serif; 
    font-size: 1.1em; 
    padding: 17px 19px; 
    text-decoration: none; 
} 

nav li:hover { 
    background-color: #353535; 
} 

nav li a:hover { 
    color: #49b2c8 !important; 
    -webkit-transition: color 0.4s ease-in; 
    -moz-transition: color 0.4s ease-in; 
    -o-transition: color 0.4s ease-in; 
    -ms-transition: color 0.4s ease-in; 
    transition: color 0.4s ease-in; 
} 

HTML：

<nav> 
    <ul> 
     <li><a href="">Home</a></li> 
     <li><a href="">Help</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Staff</a></li> 
     <li><a href="">Contact</a></li> 
     <li><a href="">News</a></li> 
     <li><a href="">Search</a></li> 
     <li><a href="">Shop</a></li> 
    </ul> 
</nav> 

Answer 1

nav { 
    text-align: center; 
} 

nav li { 
    display: inline-block; 
} 

nav li a { 
    display: block; 
    /* The rest of your code here */ 
} 

Answer 2

如果妳希望集中的鏈接作爲對父母的即<ul></ul> 中心的同時，使li作爲inline-block，並給予text-align: center在ul。刪除float: left;

ul { 
text-align: center; 
.... 
} 
ul li { 
display: inline-block; 
/* float: left; */ 
.... 
} 

如果妳希望每一個環節是li設置一個寬度li中心，並把text-align: center爲li。既然你有8個環節，同等地劃分寬度設定爲李寬度12.5％

li { 
text-align: center; 
width: 12.5%; 
.... 
} 

Answer 3

只是一個提示：使用僞類:hover將自動覆蓋您的導航鏈接設置的初始顏色。因此，您使用!important是不必要的。

查看此頁面，瞭解更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity