2

不确定标题是否是真正的问题，但我的水平滚动图像列表播放效果不佳。我希望所有图像彼此相邻（有效地浮动）（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 轴上离开页面，并且客户端可以水平滚动图像，但我不希望图像和图像之间的垂直方向有任何间隙窗户的边缘。

截屏

更新：

我无法在 jsFiddle 中复制该问题，因为小提琴似乎难以对html,body和相对大小的图像进行样式设置。我没有时间或耐心去弄清楚原因。

我决定去黑客攻击。img和html和bodyvertical-align:bottom的混合。_ 这将使列表项之后的任何空格变得多余，因为可视区域将受到限制。overflow-y:hidden

4

4 回答 4

2

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

img {
  vertical-align: bottom;
}

希望这有帮助。

于 2013-08-25T14:34:13.793 回答
1

display: inline 由于[原因在这里]，您遇到了问题。阿尔钦是对的，float:left会解决问题，但你也必须删除display:inline。如果您想要水平滑块，您可以将宽度ul增加到图像宽度的总和并在其父级上使用overflow-x:hidden或。overflow-x:autodiv

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

我将 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;
}
于 2013-08-25T19:55:33.767 回答
0

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

#content-images{
    height:100%;
    white-space: nowrap;
    margin: 0;
}
于 2013-08-25T14:40:56.027 回答
0

使用左浮动而不是内联：

#content-images li{

float:left;

}

那个空格是因为内联元素后面有一个空格。为图像添加 margin-bottom:-4px。还给图像display:block。玩会这一切，你应该能够解决你的问题。

于 2013-08-25T14:41:21.533 回答