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

如果你想将链接集中在父母的中心，<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个链接，为了均匀划分宽度，请将li的宽度设置为12.5％

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

Answer 2

只是提示：使用伪类 :hover 将自动覆盖您为导航链接设置的初始颜色。因此，您不必使用!important。

请查看此页面以获取更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

如何将导航链接置于导航中心

3 个答案: