如果我把鼠标移到任何一个Li上面，它就会失去位置。 我该怎么修复它？
演示https://jsfiddle.net/z970pg6n/
Html代码:
<ul class="pictures">
<li><p>Sokina Jue</p></li>
<li><p>Sokina Jue</p></li>
<li><p>Sokina Jue</p></li>
<li><p>Sokina Jue</p></li>
</ul>
Css代码:
ul {
list-style: none;
display: block;
padding: 0;
margin: 0;
}
ul.pictures li{
margin: 0;
padding: 0;
display: inline-block;
margin-right: 20px;
width: 200px;
height: 200px;
background-color: red;
clear: both;
}
ul li p {
display: none;
width: 100%;
background: black;
color: white;
}
ul li:hover p {
display: inline-block;
}
奇怪的效果是由于在悬停时将display属性从block更改为inline-block造成的。 如果您希望内容在悬停时显示，但默认情况下是隐藏的，我建议使用属性Visibility而不是Display。
null
ul {
list-style: none;
display: block;
padding: 0;
margin: 0;
}
ul.pictures li {
margin: 0;
padding: 0;
display: inline-block;
margin-right: 20px;
width: 200px;
height: 200px;
background-color: red;
clear: both;
}
ul li p {
visibility: hidden;
width: 100%;
background: black;
color: white;
}
ul li:hover p {
visibility: visible;
}<ul class="pictures">
<li>
<p>Sokina Jue</p>
</li>
<li>
<p>Sokina Jue</p>
</li>
<li>
<p>Sokina Jue</p>
</li>
<li>
<p>Sokina Jue</p>
</li>
</ul>