gpt4 book ai didi

html - 无序列表项在图像下方添加空间

转载 作者:行者123 更新时间:2023-11-27 22:30:23 24 4
gpt4 key购买 nike

不确定标题是否是真正的问题,但我的水平滚动图像列表播放效果不佳。我希望所有图像彼此相邻地聚在一起(有效地 float )(到目前为止,我已经使用 display:inline 设法实现了这一点)。但我希望它们都是窗口/主体的 100% 高度,而且效果不佳。

这是我的 HTML:

<body>
<div id="content">
<ul id="content-images">
<li>
<img src="image1.jpg"/>
</li>
<li>
<img src="image2.jpg"/>
</li>
<li>
<img src="image3.jpg"/>
</li>
</ul>
</div>
</body>

还有 CSS:

html, body{

margin:0px;
border:0px;
padding:0px;

height:100%;

}

#content{

height:100%;
background-color:green;

}

#content-images{

height:100%;

white-space: nowrap;

}

#content-images li{

font-size:0;
display:inline;

height:100%;

}

#content-images img{

max-height:100%;
height:auto;
max-width:100%;
width:auto;

}

问题是沿着 li 元素底部的大约 2/3px 的小间隙。很难判断它是 body 的一部分还是 list items 的一部分,但无论哪种方式,它都是一个令人讨厌的异常。

我正在 Chrome 中查看。我附上了截图。注意底部的白线。明确地说,我很高兴图像在 x 轴上离开页面,并且客户端可以水平滚动图像,但我不希望在图像和图像之间的垂直方向上有任何间隙窗口的边缘。

Screenshot

更新:

我无法在 jsFiddle 中重现该问题,因为 fiddle 似乎难以为 htmlbody 和相对大小的图像设置样式。我没有时间或精力去弄清楚原因。

我决定去尝试一下。 img 上的 vertical-align:bottomhtml 上的 overflow-y:hidden body 。这将使列表项后的任何空格变得多余,因为可视区域将受到限制。

最佳答案

您可以在图像标签上使用 vertical-align: bottom 来防止这种情况,如下所示:

img {
vertical-align: bottom;
}

希望这对您有所帮助。

关于html - 无序列表项在图像下方添加空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18429649/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com