Question

我试图用显示的链接填充我的导航，但是，a：2的问题是a：hover。

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

二，悬停不会填充导航内部链接元素的高度（我希望它填充导航高度的内容，如前所述）。我可以编辑左边距和右边距，这反映了我每次保存css文件时的情况，但除此之外，当我添加顶部填充时，它会一直溢出。

就左右边距而言，我可以防止它溢出左侧的元素但不能正确 - 我是否需要调整导航元素的最大宽度？我可以使用百分比填充吗？

        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

你可以给链接一个高度和宽度

nav a{

height:45px;

width:60px; or any width you want 

}

Answer 2

你应该使用ul和这个完整的鳕鱼来提供你所要求的

<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悬停不是导航的全高或宽度

2 个答案: