CSS 悬停不是导航的全高或全宽

Question

我正在尝试用显示的 link 填充我的导航，但是，a:hover.

有两处错误

第一，它似乎没有完全居中，即使我删除了顶部和底部的填充，这会影响悬停的高度，因为它会溢出到导航元素之外。

二，悬停不填充 Nav 内 link 元素的高度（我希望它像前面提到的那样填充整个 Nav 高度）。我可以编辑左右边距，这反映了我每次保存 css 文件时的情况，但除此之外，当我添加顶部填充时，它会一直溢出顶部。

就左右内边距而言，我可以防止它溢出到左侧元素之外，但无法获得右侧 - 我需要调整 nav 元素的最大宽度吗？我可以使用百分比填充吗？

        nav
    {
        background: #c9cec8; /* Old browsers */
        background: -moz-linear-gradient(top, #c9cec8 1%, #babfb3 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #c9cec8 1%,#babfb3 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #c9cec8 1%,#babfb3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        margin: auto;
        margin-bottom: 10px;
        text-align: center;
        max-width: 35%;
        height: 45px;
    }

nav a
{
    padding: 0px 20px;
    margin: auto;
    font-size: 23px;
    text-decoration: none;
    color: #ECF0F1;
    background: #c9cec8; /* Old browsers */
    background: -moz-linear-gradient(top, #c9cec8 1%, #babfb3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #c9cec8 1%,#babfb3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #c9cec8 1%,#babfb3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

    nav a:hover
    { 
        color: #34495E;
        background: #95a5a6; /* Old browsers */
        background: -moz-linear-gradient(top, #95a5a6 0%, #abb7b7 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #95a5a6 0%,#abb7b7 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #95a5a6 0%,#abb7b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

End Result after CSS Edit help

Answer 1

你可以给 link 一个高度和宽度

nav a{

height:45px;

width:60px; or any width you want 

}

Answer 2

你应该根据你的要求使用 ul 和这个完整的 cod

<html>
<head>
  <style>

nav{
  background: #c9cec8; /* Old browsers */
      background: -moz-linear-gradient(top, #c9cec8 1%, #babfb3 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #c9cec8 1%,#babfb3 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #c9cec8 1%,#babfb3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      margin: auto;
      margin-bottom: 10px;
      text-align: center;
      max-width: 35%;
      height:55px;

}
.inline-list{
  display: -webkit-inline-box;
  list-style: none;
  padding: 0px;
}

a{
  padding: 15px 20px;
  margin: auto;
  font-size: 22px;
  text-decoration: none;
  color: #ECF0F1;}
  li a:hover
  {

      color: #34495E;
      background: #95a5a6; /* Old browsers */
      background: -moz-linear-gradient(top, #95a5a6 0%, #abb7b7 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #95a5a6 0%,#abb7b7 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #95a5a6 0%,#abb7b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  }



  </style>

</head>
<body>
  <nav>
  <ul class="inline-list">
  <li>
   <a href="#">Home</a>
  </li>
  <li>
   <a href="#">Team</a>
  </li>
  <li>
   <a href="#">About</a>
  </li>
  <li>
  <a href="#">Files</a>
  </li>
  <li>
  <a href="#">Forum</a>
  </li>
  </nav>

</body>

</html>

CSS 悬停不是导航的全高或全宽

CSS Hover not full height or width of Nav

css

hover

nav