我现在很困，我正在一个网站上工作，我对导航栏上的列表高度进行了排序，但现在我想使宽度更大，所以当我将鼠标悬停在它上面时，背景颜色会覆盖稍微大一点的区域，而不是刷到文本的末尾。
我试过填充它，但似乎所做的只是稍微移动文本，然后将文本居中放置在该区域内。
图像(没有足够的声誉来嵌入):http://i.imgur.com/pAxT3gb.png
这是我目前拥有的 CSS。我将不胜感激!
html {
margin: 0;
}
body {
padding: 0;
margin: 0;
border: 0;
}
.navigation {
font-family: Arial;
font-size: 16px;
font-weight: lighter;
background-color: #555;
color: white;
width: 100%;
height: 72px;
background-image: url("images/download.png");
}
.navigation ul {
list-style-type: none;
text-decoration: none;
}
.navigation li {
height: 100%;
width: 80px;
display: inline-block;
padding-top: 25px;
float: right;
margin-right: 120px;
}
.navigation li a {
text-decoration: none;
color: white;
}
.navigation li a:hover {
height: 100%;
padding-top: 25px;
padding-bottom: 30px;
width: 80px;
background-color: #556;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>最佳答案
这就是你要找的吗。
我们从父元素中移除宽度，并使用 padding 制作链接 block 元素
.navigation li {
display: inline-block;
float: right;
margin-right: 120px;
}
.navigation li a {
text-decoration: none;
color: white;
display: block;
padding: 26px 30px;
}
.navigation li a:hover {
background-color: #556;
}
让 li float right 会弄乱链接的顺序，考虑 float 父 ul insted。
关于html - 将鼠标悬停在文本上时的背景颜色宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28921273/