【发布时间】：2016-04-29 09:35:59
【问题描述】：
我正在尝试用显示的链接填充我的导航，但是，a:hover 有两个问题。
第一，它似乎没有完全居中，即使我删除了顶部和底部填充，这会影响悬停的高度，因为它会溢出到导航元素之外。
二，悬停不会填充导航内链接元素的高度（我希望它填充导航高度的整体性，如前所述）。我可以编辑左右边距，这会在我每次保存 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+ */
}
【问题讨论】：