Question

html代码，

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #primaryContent{
                text-align: center;

            }
        </style>
    </head>

    <body id="twoColLayout">
        <div id="primaryContent">
            <img src="banner_1.png" /><img src="banner_2.jpg" /><img src="banner_3.png" />

        </div>

    </body>
</html>

这就是结果。

enter image description here

确定这样可以正常工作，但如果缩小浏览器，

就是这样，

enter image description here

如何制作滚动条，而不是放下图像？

Answer 1

您需要使用min-width属性来实现您的目标。

对于实例，我们假设您的每张图片都是300px宽，因此包含图片的#primaryContent应该大于所有三幅图片总宽度的300px * 3。

#primaryContent{
    min-width:950px;
}

一旦浏览器扩展到950px或更低，这将创建一个地平线滚动条。

PS： 950px是一个仲裁值。根据您的要求计算宽度。

<强> READ MORE HERE

希望这有帮助。

Answer 2

您必须将body设置为特定宽度。

所以将width添加到您的CSS：

<style>
    body {
        width: 1000px;
    }

    #primaryContent{
        text-align: center;
    }
</style>

将1200更改为您需要的任何尺寸。

Answer 3

您需要在容器上设置足以容纳内容的min-width 以下是演示fiddle。

Answer 4

在样式表中试试......

#primaryContent { overflow:scroll; }

Answer 5

图像是内联元素。如果父元素不够宽，它们会像单词一样包裹。

禁用包装使用：

#primaryContent {
   white-space: nowrap;
}

请参阅here工作原理。

Answer 6

通过设置white-space：pre

，将primaryContent div设置为不允许内容换行

请参阅我的jsbin demo here

    <style>
        #primaryContent{
            text-align: center;
            white-space: pre;
        }
    </style>

Answer 7

抱歉，我很想念，所以请忽略以前的答案如果你想制作水平滚动条，你必须在css

中使用下面的属性

#primaryContent {
  min-width:1000px; /*you can set whatever width you want to keep*/
}

如果用户调整浏览器大小，我该如何制作水平滚动条？

7 个答案: