我尝试在悬停元素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/

10-12 12:40
查看更多