Question

尝试将样式应用于链接的悬停状态时遇到此问题。

如果这是一个重复的帖子，我无法想出正确的短语来谷歌这个问题，所以道歉。我还可以补充一点，我是一个完全的初学者。

无论如何这是发生的事情：填充不会在标题内部应用，而是溢出到主页面内容中。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Header 1</h1>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
    </ul>
</nav>
</header>

</body>
</html>

CSS：

@font-face{
    font-family: LobsterTwoBoldItalic;
    src: url(../fonts/LobsterTwo-BoldItalic.ttf);
}

* {
    box-sizing: border-box;
    margin: 0;
    font-family: LobsterTwoBoldItalic;
}

header {
    height: 100px;
    width: 100%;
    background: #3399FF;
    position: relative;
}

header h1 {
    float: left;
    padding: 20px;
    color: #FFF;
    font-size: 48px;
}

header nav {
    float: left;
}

header nav ul {
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: 0px;
}

header nav ul li {
    display: inline-block;
    font-size: 32px;
}

header nav ul li a{
    text-decoration: none;
    color: #FFF;
    padding: 20px 25px 10px 25px;
}

header nav ul li a:hover{
    background: #CCC;
    color: #217C7E;
}

我做错了什么？

Answer 1

更改

header nav ul li a{
 text-decoration: none;
 color: #FFF;
 padding: 20px 25px 10px 25px;
}

到

header nav ul li a{
 text-decoration: none;
 color: #FFF;
 padding: 20px 25px 1px 25px;//this puts it to the bottom of the nav bar in JS fiddle
}

您可以在jsfiddle中尝试：http://jsfiddle.net/v93mzvvj/

Answer 2

填充会为元素内部添加空间。

enter image description here

你想要的是改变它，这样底部的填充只有0px，这样你就可以得到你想要的文本间距，而不会超过导航栏的底部。

<强> JSFiddle

只需更改CSS文件的这一部分：

header nav ul li a{
    text-decoration: none;
    color: #FFF;
--> padding: 20px 25px 0px 25px;
}

填充溢出底部

2 个答案: