小编the*_*ler的帖子
意外的导航栏在悬停时移动
我正在尝试修复此导航菜单几个小时..但我不确定悬停效果的问题出在哪里。也许填充是问题，但我可以请您指导我如何解决问题吗？
我想在悬停时实现这种效果，但是当我悬停导航项时，所有其他项都在移动。
这是我的代码示例。
body { background: #000; }
.navigation {
float: right;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
display: inline-block;
}
.navigation ul li a {
display: block;
font-family: "Rubik", sans-serif;
font-weight: 300;
font-size: 17px;
color: #fff;
line-height: 64px;
text-decoration: none;
padding: 8px 15px;
}
.navigation ul li a:hover {
color: red;
border: 1px solid #fff;
border-radius: 22px;
width: 165px;
}<nav class="navigation">
<ul>
<li><a href="#">Features</a>
</li>
<li><a href="#">Blog</a>
</li>
<li><a href="#">Support</a>
</li>
<li><a href="#">Get …0
推荐指数
推荐指数
1
解决办法
解决办法
2122
查看次数
查看次数
如何在HTML/CSS中完成此布局？
为什么浮动元素没有正确排列？我的图像有一些空白区域,我不知道它来自哪里.
期望的外观:
代码:
.inner-wrapper { float: left; width: 100%; color: #000; }
.feature-1 { float: right; margin: 0 auto; width: 50%; height: auto; }
.aside-image-1 { float: left; margin: 0 auto; height: auto; width: 50%; }
.feature-2 { float: left; margin: 0 auto; width: 50%; height: auto; }
.aside-image-2 { float: right; margin: 0 auto; height: auto; width: 50%; }
.feature-3 { float: right; margin: 0 auto; width: 50%; height: auto; }
.aside-image-3 { float: left; margin: 0 auto; height: …0
推荐指数
推荐指数
1
解决办法
解决办法
65
查看次数
查看次数