html – 无论浏览器缩放级别如何,如何使图像排成一行？

概述似乎无论我做什么,当我放大浏览器时,我都无法将一行图像水平排列.当我放大时,最右边的图像将下拉到下一行而不是离开屏幕.我试过浮动：左边;创建边框,位置：相对;但没有运气. 如果我使用position：absolute;好像我必须手动定位每个图像. 我的目标是使用jquery创建一个滑动图像库,如下所示：http://www.elated.com/res/File/articles/developm 似乎无论我做什么,当我放大浏览器时,我都无法将一行图像水平排列.当我放大时,最右边的图像将下拉到下一行而不是离开屏幕.我试过浮动：左边;创建边框,位置：相对;但没有运气.

如果我使用position：absolute;好像我必须手动定位每个图像.

我的目标是使用jquery创建一个滑动图像库,如下所示：http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/

我不想复制上面链接中的代码,因为我想通过理解基本构建块从头开始创建所有内容.

解决方法 尝试将图像包装在容器div宽度100％中,溢出：隐藏;这将停止出现滚动条 – 然后将容器div的white-space属性设置为nowrap,这应该强制图像保持在一行,但容器区域外的溢出将被隐藏,允许您将更改编写到左侧/右偏移或边距 – 您可以使图像显示为内联或内联块

Nate,如果还有标题文本以及这些图像,则空白属性也会影响标题中的文本,因此您可能需要将任何标题重置为空格：正常

示例CSS：

#container {wIDth: 500px;height: 300px;overflow: hIDden;border: 3px double #000;white-space: nowrap;}#container img {display: inline-block; margin: 0 100px;}

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>

总结

以上是内存溢出为你收集整理的html – 无论浏览器缩放级别如何,如何使图像排成一行？全部内容，希望文章能够帮你解决html – 无论浏览器缩放级别如何,如何使图像排成一行？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。