Question

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

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>

Answer 1

这是因为当您添加边框时，元素的高度会额外增加2px。额外的高度显示元素移动了一点点。您最初可以为元素应用透明边框，然后在悬停时应用实际边框。通过这种方式，您无法区分元素位置。

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

DEMO

Answer 2

像这样改变：

text-align: center;

Codepen link

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

2 个答案: