gpt4 book ai didi

html - 按钮的悬停错误,上边距

转载 作者:行者123 更新时间:2023-11-28 08:36:41 25 4
gpt4 key购买 nike

我制作了两个带有边框的按钮:2px solid #color,当我将鼠标悬停在它们上面后,border 消失并且按钮变为 2px 下来。我刚刚使 :hover margin2 px 比正常的多。一切都很好,但唯一的问题是,当我悬停其中一个按钮时,两个按钮都会向下移动 2 像素。怎么了?

干杯。

Preview

这是我的 html 代码:

<div class="slide-wrapper">
<h2>We are <span>cool</span> kids</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, nulla sit amet rutrum finibus, ligula orci.</p>
<a href="#" class="btn btn-show">Videos</a>
<a href="#" class="btn btn-sign">Sign for a newsletter</a>
</div>

这是我的 CSS:

.btn {
padding: 16px 38px;
margin-right: 30px;
border-radius: 5px;
display: inline-block;*/
}

.btn:last-child {
margin-right: 0;
}

.btn-show {
background: #4183d7;
box-shadow: 0 2px #446cb3;
}

.btn-sign {
background-color: #87d37c;
box-shadow: 0 2px #7ebc74;
}

.btn-show:hover,
.btn-sign:hover,
.btn-newsletter:hover {
margin-top: 2px;
box-shadow: none;
}

最佳答案

问题是 display: inline-block 默认为 baseline。因此,当您按下一个按钮 2px 时,默认情况下另一个按钮会按下(因为还有 2 个像素的空间)。将垂直对齐方式设置为默认为 top:

.btn {
padding: 16px 38px;
margin-right: 30px;
border-radius: 5px;
display: inline-block;
vertical-align: top; //add
}

FIDDLE

关于html - 按钮的悬停错误,上边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28004944/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com