html – 悬停在li上第二行li move

概述我试图在项目列表上悬停显示边框颜色.当我将鼠标移到第一行项目上时,第二行项目向右移动.请检查 jsFiddle <ul class="tiles"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li></ul> CSS ul.tiles { width: 400px; }ul.tiles li { 我试图在项目列表上悬停显示边框颜色.当我将鼠标移到第一行项目上时,第二行项目向右移动.请检查 jsFiddle

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

CSS

ul.tiles { wIDth: 400px; }ul.tiles li {  float: left;  List-style-type: none;  wIDth: 100px;  height: 100px;  margin: 10px;  background: white;}ul.tiles li:hover {    border: 1px solID black;}}

解决方法 为您的li添加透明边框：

li {    border: 1px solID transparent;}

ul.tiles { wIDth: 400px; }ul.tiles li {  float: left;  List-style-type: none;  wIDth: 100px;  height: 100px;  margin: 10px;  background: white;}ul.tiles li:hover {    border: 1px solID black;}ul.tiles li {    border: 1px solID transparent;}

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

总结

以上是内存溢出为你收集整理的html – 悬停在li上第二行li move全部内容，希望文章能够帮你解决html – 悬停在li上第二行li move所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。