Question

不确定标题是否是真正的问题，但我的水平滚动图像列表不是很好。我希望所有的图像能够彼此紧挨着（有效地浮动）（到目前为止，我已经设法使用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;

}

问题是大约2 / 3px的小间隙沿着li项目的底部运行。很难说它是body的一部分还是list items的一部分，但无论哪种方式都是令人讨厌的异常现象。

我在Chrome中查看。我附上了截图。注意底部的白线。为了清楚起见，我很高兴图像在x轴上从页面上运行，并且客户端在图像中水平滚动，但我不希望在图像和图像之间的垂直方向上有任何间隙。窗户的边缘。

Screenshot

更新

我无法在jsFiddle中复制这个问题，因为小提琴似乎很难设计html，body和相对大小的图像。我没有时间或专利来弄清楚原因。

我决定去寻找黑客。 img 上的vertical-align:bottom和 html 和正文上的overflow-y:hidden的混合。这将使列表项之后的任何空格变为冗余，因为可视区域将受到限制。

Answer 1

您可以使用图片代码上的vertical-align: bottom来阻止此操作：

img {
  vertical-align: bottom;
}

希望这会有所帮助。

Answer 2

由于display: inline [Reason here] ，您遇到了问题。 Alqin是对的，float:left会解决问题，但您还必须删除display:inline。如果您想要水平滑块，可以将ul的宽度增加到图像宽度的总和，并在其父overflow-x:hidden上使用overflow-x:auto或div。

PS：在所有元素上使用height:100%不是一个好主意。当内容溢出时，它会使您的页面看起来很奇怪。

我将CSS更改为以下内容，并删除了我认为不必要的属性：

html, body{
    margin:0px;
    height:100%;
}

#content{
    height:100%; /* a bad idea */
    background-color:green; /* add this to body if you want whole body green */
    overflow-x: auto;
}

#content-images{
    height:100%; /* again, a bad idea*/
    width: 3000px; /* sum of widths of images I used to test */
}

#content-images li{
    font-size:0;
    float: left;
}

#content-images img{
    max-height:100%;
    height:auto;
    max-width:100%;
    width:auto;
}

Answer 3

您是否尝试从无序列表元素中删除边距？

#content-images{
    height:100%;
    white-space: nowrap;
    margin: 0;
}

Answer 4

使用float left而不是inline：

#content-images li{

float:left;

}

该空间是因为内联元素后面有空格。为图像添加margin-bottom：-4px。同时提供图片display:block。玩这一切，你应该能够解决你的问题。

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

4 个答案: