我正在制作一个带有文字的小册子列表,解释它们是什么,显示在小册子图像的顶部。 一切都很好。只是由于某种原因,小册子的图像在高度上比绝对位于其顶部的 div 小。正如您在 jsfiddle 中看到的,具有文本的 ul 设置为 100% 的高度。好吧,出于某种原因,带有文本的 ul 超出了图像的高度。我希望它自动设置与图像相同的高度。没有填充,没有边距。我似乎无法理解为什么要这样做。另外,正如您所看到的,包裹图像的 li 的高度也比图像高。感谢您的帮助,谢谢! CSS:
img{
padding:0;
margin:0;
}
#brochures > ul{
list-style:none;
padding:0;
margin:0;
}
#brochures li{
display:inline-block;
margin: 0;
}
#brochures ul li a{
position:relative;
display:block;
}
#brochures > ul ul{
text-align:center;
color:white;
background-color:rgba(0,0,0,0.6);
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
padding:0;
margin:0;
}
HTML:
<div id="brochures">
<ul>
<li><a href="#" >
<img src="http://0.tqn.com/d/office/1/0/i/4/-/-/Publisher-2013.png" />
<ul>Example Text</ul>
</a>
</li>
</ul>
</div>
这是 jsfiddle 链接:http://jsfiddle.net/W76pw/1/
最佳答案
关于html - 为什么 li 的尺寸在高度上比 li 包裹的图像尺寸大?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24150026/