我尝试在悬停元素padding-top
上使用ul#top li a
,但是它无法执行代码,也许内联块显示正在困扰填充显示,但是我不知道有任何其他显示可帮助他进行内联并能够填充-最佳。
如果我的目标无法理解,我会尝试将“ a”标记填充到顶部(约5像素填充)。
这是我的CSS代码:
ul#top{
list-style: none;
}
ul#top li{
display: inline-block;
padding-right: 30px;
}
ul#top li a{
color: white;
text-decoration: none;
font-family: "Comic Sans MS", cursive, sans-serif;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-o-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
ul#top li a:hover{
padding-top: 10px;
color: green;
}
我的HTML:
<div class="header">
<div class="menu">
<ul id="top">
<li><a href="#">Home</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</div>
如何在行内块显示中启用padding-top? (内联块可能不是问题,但我认为是)
最佳答案
您可以添加bottom: 10px
代替position: relative
。还添加padding-bottom
以解决悬停问题:
ul#top {
list-style: none;
}
ul#top li {
display: inline-block;
padding-right: 30px;
}
ul#top li a {
color: white;
text-decoration: none;
font-family:"Comic Sans MS", cursive, sans-serif;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-o-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
ul#top li:hover a {
position: relative;
padding-bottom: 10px;/*Add padding bottom*/
color: green;
bottom: 10px;/*Add bottom 10px*/
}
body {
background: red;
}
<div class="header">
<div class="menu">
<ul id="top">
<li><a href="#">Home</a>
</li>
<li><a href="#">test</a>
</li>
<li><a href="#">test</a>
</li>
<li><a href="#">test</a>
</li>
<li><a href="#">test</a>
</li>
</ul>
</div>
</div>
关于html - 在导航栏中将鼠标悬停在顶部元素上,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26017820/