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

【问题标题】：Horizontal scrolling of images with horizontal image alignment and spacing具有水平图像对齐和间距的图像水平滚动
【发布时间】：2020-12-02 08:48:56
【问题描述】：

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

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

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

图像似乎是顶部对齐的。我希望它们居中对齐，而不是水平顶部对齐。
我无法增加水平图像之间的间隙。我想把它设为 200px。但整组图像向下移动。看起来它也将 100px 添加到顶部？
在移动 Safari 中，我看不到滚动条。有什么功能可以用来显示滚动条吗？

#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>

【问题讨论】：

为什么你认为图片有 text-align 属性？
你应该在jsfiddle.net创建一个小提琴
@Ryan ：您好，欢迎来到 SO，我们感谢您编写的任何代码，因此我们可以找到解决您问题的方法...否则，这里不能用勺子喂食！！ :)
大家好，基本上，该链接页面源正是我正在使用的。有人可以帮忙在这里粘贴代码吗？我尝试在编辑模式下粘贴它，然后选择该部分文本并执行“CTRL+K”以添加 4 个空格，如帮助中所述。但它不会在灰色框中显示为代码。也许我错过了什么？我可以在前后添加类似 的内容吗？
我想帮助你，但我不能容忍只强制水平滚动。如果我通过移动浏览器访问您的网站（并且您需要启用触摸事件），我会通过互联网向您发送phone spiders。

标签： css html

【解决方案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，但您可以通过确保内容不完全适合的方式让用户更清楚地看到内容是可滚动的 - 从而使下一张图像部分可见。

响应您的 cmets，您可以使用 :first-child 和 :last-child 伪选择器来更改第一个和最后一个项目的填充：

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

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

【讨论】：

非常感谢 Moob！那行得通。我有一个查询。有没有办法可以控制第一张图像和最后一张图像之间的空间？现在图像之间的填充是完美的，但由于它是一个小框架，第一张图像可能需要移动一点才能放置在中心，这与最后一张图像类似。基本上，想要减少第一张图像的左填充，然后减少最后一张图像的右填充。
另外，为了确认一下，有没有办法在移动 Safari 中启用滚动条？还是目前不可能？
感谢@Moob！那很有帮助。还有一件事，我对 CSS 不是很熟悉， min-width:500 会做什么？我希望控制第一张图像左填充和最后一张图像右填充。不确定我是否遗漏了什么。谢谢！
你先生，太棒了！谢谢！

【解决方案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 等。

【讨论】：