Html 无论浏览器缩放级别如何，如何使图像排成一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6464383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make images line up in a row regardless of browser zoom level?
提问by user701510
It seems that no matter what I do, I can't get a row of images to line up horizontally when I zoom into the browser. When I zoom in, the images furthest to the right will drop down to the next row instead of going off screen. I've tried float:left;, creating a border, and position:relative;but no luck.
看来不管我怎么做，放大浏览器时都无法得到一排图像水平排列。当我放大时，最右边的图像将下降到下一行而不是离开屏幕。我试过float:left;，创建一个边界，position:relative;但没有运气。
If I use position:absolute;it seems like I have to manually position each image.
如果我使用position:absolute;它似乎我必须手动定位每个图像。
My goal is make a sliding image gallery using jquery like the one here: http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/
我的目标是使用 jquery 制作一个滑动图片库，就像这里的一样：http: //www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/
I don't want to copy the code in the link above, because I want to create everything from scratch by understanding the fundamental building blocks.
我不想复制上面链接中的代码，因为我想通过理解基本构建块从头开始创建所有内容。
回答by clairesuzy
try wrapping the images in a container div width 100%, with overflow: hidden;this will stop a scroll bar appearing - Then set the white-spaceproperty of the container div to nowrapthis should force the images to stay on one line but the overflow outside your container area will be hidden allowing you to script the change to the left/right offset or margin - you can make the images display inline, or inline-block
尝试将图像包装在容器 div 宽度 100% 中，overflow: hidden;这将停止出现滚动条 - 然后将white-space容器 div的属性设置为nowrap这应该强制图像保持在一行，但容器区域外的溢出将被隐藏允许您编写对左/右偏移量或边距的更改的脚本 - 您可以使图像显示内联或内联块
Nate that if there is also caption text along with these images the white-space property will also affect the text in the captions so you may need to reset any captions to white-space: normal
Nate，如果这些图像还有标题文本，white-space 属性也会影响标题中的文本，因此您可能需要将任何标题重置为 white-space: normal
sample CSS:
示例 CSS：
#container {
width: 500px;
height: 300px;
overflow: hidden;
border: 3px double #000;
white-space: nowrap;
}
#container img {display: inline-block; margin: 0 100px;}
HTML:
HTML：
<div id="container">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
</div>
回答by Samuel Liew
try creating a container div around the images with fixed width, i.e.: in px
尝试在具有固定宽度的图像周围创建一个容器 div，即：以 px 为单位
<html>
<head>
<title></title>
<style type="text/css">
#container { width:1100px; }
img { width:200px; height:100px; margin: 0 10px; float:left; }
</style>
</head>
<body>
<div id="container">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
