滚动到屏幕外的最后一张 float 图片
大家好
我这里有一个演示 - http://www.ttmt.org.uk
它只是一个简单的漂浮在屏幕外的图像列表。
图像漂浮在屏幕外，因为我设置了容器的宽度以允许它们漂浮。
如果我滚动查看图片，它会滚动过去最后一张图片，只剩下木板空间。
如何设置容器的宽度以允许图像 float 但在最后一张图像停止滚动。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--css-->
<link rel="stylesheet" href="css/master.css" />
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
width:100%;
}
li{
list-style:none;
float:left;
margin:0 10px 0 0;
}
.wrap{
padding:20px;
overflow:auto;
width:5000px;
background:#eee;
}
</style>
<title>Title of the document</title>
</head>
<body>
<div class="wrap">
<ul>
<li><img src="01.jpg" /></li>
<li><img src="02.jpg" /></li>
<li><img src="03.jpg" /></li>
<li><img src="04.jpg" /></li>
<li><img src="05.jpg" /></li>
</ul>
</div>
</body>
</html>
最佳答案
.wrap {width:auto; white-space: nowrap;}
li {float:none; display:inline-block}
这样就可以了
关于css - 滚动到屏幕外的最后一张 float 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19027631/