when：hover li tag为什么边框会导致移动物体

Question

＆＃13;

＆＃13;

* {
   margin: 0;
   padding: 0;
 }
 body {
   margin: 10px;
   padding: 10px;
 }
 ul {
   list-style-type: none;
   width: 500px;
   height: 150px;
   background-color: gray;
 }
 ul li {
   display: inline-block;
   -webkit-transition: all0.4s ease-in-out;
 }
 ul li:hover {
   background-color: green;
   border: solid 2px red;
 }

＆＃13;

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将透明边框设置为正常状态：

* {
  margin: 0;
  padding: 0;
}
body {
  margin: 10px;
  padding: 10px;
}
ul {
  list-style-type: none;
  width: 500px;
  height: 150px;
  background-color: gray;
}
ul li {
  display: inline-block;
  -webkit-transition: all 0.4s ease-in-out;
  border: solid 2px transparent
}
ul li:hover {
  background-color: green;
  border: solid 2px red;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Answer 2

您可以在之前使用填充，然后在悬停时删除 - 请参阅下面的示例：

* {
   margin: 0;
   padding: 0;
 }
 body {
   margin: 10px;
   padding: 10px;
 }
 ul {
   list-style-type: none;
   width: 500px;
   height: 150px;
   background-color: gray;
 }
 ul li {
   display: inline-block;
   -webkit-transition: all0.4s ease-in-out;
   padding:2px;
 }
 ul li:hover {
   background-color: green;
   border: solid 2px red;
   padding:0;
 }

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>