gpt4 book ai didi

当我们悬停所有其他元素时,HTML 悬停边框移动如何解决问题?

转载 作者:行者123 更新时间:2023-11-28 02:27:23 24 4
gpt4 key购买 nike

下面我正在编写有问题的 HTML 代码当我们在悬停中向元素添加边框时,问题出现了,您甚至可以看到所以问题是如何摆脱我们希望休息元素保持静止的移动元素在我的许多网页中出现这个问题所以请帮我详细回答是什么原因,而不仅仅是解决这个特定的代码
https://codepen.io/shahrishit9/pen/aEdJWa?editors=1100在这个codepan中我们也可以看到同样的事情发生请检查一下

body{background-color:pink;font-family-arial;font-size:1.10em;}
#para{
margin:0px 50px 30px 50px;}
#footerMenu {text-align:center;}
#creator{text-align:center;}
a{padding:0px 10px;margin:10px;text-decoration:none;color:black;}
a:hover{border: solid 2px lightblue;}
<HTML lang ="en">
<head>
<title>
My new footer
</title>
<meta charset = utf-8>
</head>
<body>
<div>
<section id="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<footer>
<section id="footerMenu">
<a href=https://www.instagram.com/>Instagram</a>
<a href=https://www.facebook.com/>Facebook</a>
<a href=https://www.twitter.com/>Twitter</a>
<a href="">Site Map</a>

</section>
<section Id="creator">
design and code by Rishit Shah
</section>
</footer>
</div>

</body>
</HTML>

最佳答案

因为添加边框后,元素的高度额外增加了2px。额外的高度显示为元素移动了一点。您可以最初为您的元素应用透明边框,然后在悬停时应用实际边框。这样,您就不会区分元素位置。

li {
line-height:10px;
display:block;
padding:10px;
max-width:150px;
text-align:center;
margin:10px;
border:1px solid transparent;
}

DEMO

关于当我们悬停所有其他元素时,HTML 悬停边框移动如何解决问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47880647/

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