如何使<li>具有全高背景（与导航栏一样大）

Question

我的问题正是我在标题中提出的问题。这就是我失败的地方：https://gyazo.com/24f0bef2246e9064b87b4218bbbea909。正如您所看到的，灰色背景颜色仅围绕文本“着陆”。我试过提高李的高度但是没有用。所以基本上背景颜色应该延伸到导航栏的顶部和底部（#menu）。

我的导航栏：

<div id="wrapper">
    <div id="header">
        <ul id="menu">
            <li><a href="index.html">Landing</a></li>
            <li><a href="#">Introduction</a></li>
            <li><a href="#">Story</a></li>
            <li class="logo">
                <a href="#"><img src="./img/afrojack-logo.png" alt="AfroJack"></a>
            </li>
            <li><a href="#">Music</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Procesverslag</a></li>
        </ul>
    </div>

CSS：

#menu > li {
transition: all .2s ease-in-out;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
display: inline-block;
padding: 0 25px 0 25px;
-webkit-animation: fadein 3s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s;
/* Firefox < 16 */
-ms-animation: fadein 3s;
/* Internet Explorer */
-o-animation: fadein 3s;
/* Opera < 12.1 */
animation: fadein 3s;
}

#menu > li > a {
color: inherit;
text-decoration: none;
border: none;
}

#menu > li > a:hover {
transition: all .2s ease-in-out;
color: #C1C1C1;
}

#menu > li > a > img {
width: 60px;
margin-top: -30px;
margin-bottom: -20px;
}

Answer 1

我说的时候忘记了两件事。

1. 它应该是padding: 25px;，没有零。
2. 您忘记了display: inline-block。

守则：

#menu > li > a {
  padding: 25px;
  display: inline-block;
}

预览



小提琴：https://jsfiddle.net/q09jyjgv/

或者如果您想要完全删除空格，请执行以下操作：



从UL中移除padding： https://jsfiddle.net/3u0h0w8x/