具有水平图像对齐和间距的图像水平滚动 [英] Horizontal scrolling of images with horizontal image alignment and spacing

问题描述

我试图创建一个带有

的 html 页面来模拟 iframe.我决定在线使用这个例子.基本上，我有大约 30 张不同高度和长度的图像，宽度不大于 750 像素，高度不大于 500 像素.我正在寻找只有一个水平滚动条.

http://www.websitecodetutorials.com/代码/照片画廊/css-horizo​​ntal-scroller4-demo.php

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

1. 图像似乎是顶部对齐的.我希望它们中间对齐而不是顶部水平对齐.

2. 我无法增加水平图像之间的间隙.我想让它变成 200px.但整个图像集向下移动.看起来它还会在顶部添加 100px 吗?

3. 在移动 Safari 中，我没有看到滚动条.有什么我可以用来显示滚动条的功能吗?

#scroll {宽度:665px；高度:530px；边距:0px 自动；背景:#ffffff;溢出-y:隐藏}#scroll ul {向左飘浮;边距右:-999em；空白:nowrap;列表样式:无；}#滚动李{边距:15px；文字对齐:居中；向左飘浮;显示:内联；}#scroll img {边界:0;显示:块；边距:0px 自动；}#滚动跨度{填充:100px 0 0;显示:块；}

<ul><li><a href="#"><img src="../images/img1.jpg" alt=""><span>图片名称</span></a><li><a href="#"><img src="../images/img2.jpg" alt=""><span>图片名称</span></a><li><a href="#"><img src="../images/img3.jpg" alt=""><span>图片名称</span></a><li><a href="#"><img src="../images/img4.jpg" alt=""><span>图片名称</span></a><li><a href="#"><img src="../images/img5.jpg" alt=""><span>图片名称</span></a><li><a href="#"><img src="../images/img6.jpg" alt=""><span>图片名称</span></a><li><a href="#"><img src="../images/img7.jpg" alt=""><span>图片名称</span></a><li><a href="#"><img src="../images/img8.jpg" alt=""><span>图片名称</span></a><li><a href="#"><img src="../images/img9.jpg" alt=""><span>图片名称</span></a>

解决方案

您可以使用表格布局来实现这一点.

#scroll ul {保证金:0;填充:0;显示:表；列表样式:无；}#滚动李{最小宽度:500px；/* <如果需要，添加最小宽度 */填充:10px 100px;文字对齐:居中；显示:表格单元格；垂直对齐:中间；边框:1px 实心 #eee;}

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

至于移动 safari 中的滚动条:这个答案可能有用，但您可以通过确保内容不完全适合来让用户更明显地看到内容是可滚动的 - 从而使下一张图片部分可见.

针对您的评论，您可以使用 :first-child 和 :last-child 伪选择器来更改第一项和最后一项的填充:

#scroll li:first-child {填充左:200px;}#scroll li:last-child {填充右:200px;}

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

I was trying to create a html page with a <div> to simulate an iframe. I decided on using this example online. Basically, I have about 30 images with varying height and length not greater than 750px width and 500 px height. I was looking at having only a horizontal scrollbar.

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

I was facing an issue with three things in this tutorial

1. The images seem to be top aligned. I want them to be middle aligned and not top aligned horizontally.

2. I was unable to increase the gap between the horizontal images. I wanted to make it 200px. but the whole set of images moves down. Looks like it adds the 100px to the top also?

3. In mobile safari, I dont see a scrollbar. Is there any feature I can use to show the scrollbar?

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

解决方案

You can use a table layout to achieve this.

#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/ or http://jsfiddle.net/jM3yQ/2/ (min-width on li)

As for the scrollbars in mobile safari: this answer may be useful but you could make it more obvious to the user that the content is scrollable by ensuring that the content doesn't fit cleanly - thus leaving the next image partially visible.

In response to your comments, you can use :first-child and :last-child pseudo-selectors to change the padding of the first and last items:

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

eg http://jsfiddle.net/jM3yQ/3/

这篇关于具有水平图像对齐和间距的图像水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！