Question

我正在尝试创建一个带有<div>的html页面来模拟iframe。我决定在线使用这个例子。基本上，我有大约30张图像，其高度和长度不同，宽度不超过750像素，高度不超过500像素。我只看到一个水平滚动条。

http://www.websitecodetutorials.com/code/photo-galleries/css-horizontal-scroller4-demo.php

本教程中我遇到了三个问题

图像似乎是顶部对齐的。我希望它们是中间对齐的而不是水平顶部对齐。
我无法增加水平图像之间的差距。我想把它变成200px。但整套图像向下移动。看起来它也将100px添加到顶部？
在手机游戏中，我看不到滚动条。我可以使用任何功能来显示滚动条吗？

#scroll {
width:665px;
height:530px;
margin:0px auto;
background:#ffffff;
overflow-y:hidden

}
#scroll ul {
float:left;
margin-right:-999em;
white-space:nowrap;
list-style:none;
}
#scroll li {
margin:15px;
text-align:center;
float:left;
display:inline;           
}
#scroll img {
border:0;
display:block;
margin:0px auto;
}

#scroll span {
padding:100px 0 0;
display:block;

}

<div id="scroll">
    <ul>
    <li><a href="#"><img src="../images/img1.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img2.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img3.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img4.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img5.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img6.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img7.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img8.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img9.jpg" alt=""><span>Image Name</span></a></li>
    </ul>
</div>

Answer 1

您可以使用表格布局来实现此目的。

#scroll ul {
    margin:0; 
    padding:0;
    display:table;
    list-style:none;
}
#scroll li {
    min-width:500px; /* < Add a min-width if needed */
    padding:10px 100px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    border:1px solid #eee;
}

http://jsfiddle.net/jM3yQ/1/或http://jsfiddle.net/jM3yQ/2/（li上的最小宽度）

至于移动版Safari中的滚动条：this answer may be useful但是你可以通过确保内容不干净地让内容可滚动来让用户更清楚 - 从而使下一个图像部分可见。

在回复您的评论时，您可以使用:first-child和:last-child伪选择器来更改第一个和最后一个项目的填充：

#scroll li:first-child {
    padding-left:200px;
}
#scroll li:last-child {
    padding-right:200px;
}

例如http://jsfiddle.net/jM3yQ/3/

Answer 2

这对我有用，我用div标签代替了ul> li。

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 200px;
  height: 70px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-flow: row;
  overflow-x: scroll; 
}

#main div {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}
</style>
</head>
<body>

<h1>The Title</h1>

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>

您可以添加任意内容，而不是A，B，C等。

水平滚动具有水平图像对齐和间距的图像

2 个答案: