我正在应用导致 <li> 的过渡悬停效果放大。
问题是 last child在每一行，当鼠标悬停时，插入下一个 2 <li>在右边的几个空格下面。
有什么办法可以避免这种情况发生？我对使用转换有点陌生，一直在绞尽脑汁想看看是否可以解决这个问题。
谢谢!
CSS
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 985px;
min-height: 500px;
margin: 0 auto;
}
ul #fourbox {
list-style-type: none;
}
#fourbox li {
display: block;
width: 188px;
height: 213px;
margin: 15px 10px;
padding: 15px;
background: #F1F1F2;
border: 1px solid #D1D2D4;
float: left;
box-shadow: 0px 0px 0px #888888;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
}
#fourbox li:hover {
width: 198px;
height: 228px;
margin: 5px 5px;
box-shadow: 0px 7px 10px #888888;
}
HTML
<body>
<div id="wrapper">
<ul id="fourbox">
<li>
<p>1</p>
</li>
<li>
<p>2</p>
</li>
<li>
<p>3</p>
</li>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
<li>
<p>7</p>
</li>
<li>
<p>8</p>
</li>
</ul>
</div>
</body>
最佳答案
这是一种解决方案:
使用 display:inline-block 而不是 float:left
#fourbox li {
width: 188px;
height: 213px;
margin: 15px 10px;
padding: 15px;
background: #F1F1F2;
border: 1px solid #D1D2D4;
display:inline-block; /* ADD THIS <<< */
box-shadow: 0px 0px 0px #888888;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
}
或者，如果您需要 float 它们，您也可以使用 clear:both。
两种解决方案都有效。不错的小动画!
关于html - 向左浮动 <li> + 高度过渡 = 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19013577/