我有一个HTML导航栏,我将其设置为padding
的{{1}}所在的位置,但是,它正确显示了水平填充,但是垂直填充只是溢出了。我曾尝试将20px 45px
放在父div中,但不起作用。
overflow: auto;
nav {
background-color: #333;
height: 100%;
overflow: auto;
}
nav ul {
list-style: none;
overflow: auto;
}
nav li {
display: inline-block;
overflow: auto;
}
nav a {
color: white;
text-decoration: none;
padding: 20px 45px;
}
答案 0 :(得分:0)
我会在display: block
标签上使用a
,以便填充有效:
nav {
background-color: #333;
height: 100%;
overflow: auto;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
color: white;
text-decoration: none;
padding: 20px 45px;
}
<nav>
<ul>
<li><a href="https://www.youtube.com">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
答案 1 :(得分:0)
尝试使用overflow: hidden;
而不是overflow: auto;
nav {
background-color: #333;
height: 100%;
overflow: hidden;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
color: white;
text-decoration: none;
padding: 20px 45px;
}
<nav>
<ul>
<li><a href="https://www.youtube.com">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>