如何解决通过悬停放大元素会产生奇怪的行为
具有此html:
*{
box-sizing: border-box;
}
.clearfix::after{
content: " ";
display: table;
clear: both;
}
body{
font-family: Arial,Helvetica,sans-serif;
width: 602px;
}
header{
background-color: black;
color: white;
border-radius: 4px;
}
header img{
float:left;
}
header h1{
display: inline-block;
text-align: left;
}
header ul{
list-style: none;
}
header li{
float:left;
font-size: 1.05em;
padding-right: 6%;
font-weight: bold;
}
header a{
vertical-align: sub;
text-decoration: none;
color: #e0e0c0;
padding-left: 2px;
transition: all 0.2s;
}
header a:hover{
background: #5a288d;
color:#f0f0f0;
padding: 5px;
border-radius: 5px;
font-size: 1.2em;
}
<header>
<img src='../data/img/pap_white.png' height="130" width="130" alt="Papaluz logo">
<h1>Papaluz Consulting</h1>
<nav class="clearfix">
<ul>
<li>
<a href="#"><img src='../data/img/arrow_white.svg'>Home</a>
</li>
<li>
<a href="#"><img src="../data/img/arrow_white.svg">Contact</a>
</li>
<li>
<a href="#"><img src='../data/img/arrow_white.svg'>Services</a>
</li>
<li>
<a href="#"><img src='../data/img/arrow_white.svg'>About</a>
</li>
</ul>
</nav>
</header>
当您将鼠标悬停在最后一个列表项目上时,该项目将无法“决定”转到原始项目的下一行。因此,结果就是荒唐的行为,使您“卡住”(只需将鼠标悬停在最后一个导航项About
上。
-
如何解决将鼠标悬停在最后一项上的奇怪行为?
-
我还想解决“根据项目数猜测正确的填充”的问题。我正在说话。在这里:
页眉李{ 右填充:6%; }
我必须始终根据元素数更改百分比数。也就是说,如果我要添加另一个菜单项,则该数目必须较小,以使菜单项平均分配。我想将填充设置为自动适应最佳填充,这样它们将平均排列(并且不会有任何项目出现偏差)。如何通过display: inline-block
实现这一目标?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。