DIV不显示水平滚动条
我试图让我的 DIV 仅显示水平滚动条。我正在用大量图像填充 DIV，并且只希望用户能够水平滚动。
但我有两个问题：
我读过的一篇教程给了我一些代码（我不再有），它说它将显示滚动条。但事实并非如此。它还使图像出现在彼此之下。所以我废弃了该代码。
另一个教程给了我我想要的“外观”，但没有滚动条。但滚动条应该出现！
我怎样才能拥有一个充满图片的 DIV 和一个水平滚动条？
这是我到目前为止所拥有的：
CSS: (dude.css)
.EditorialImagePaneOne
{
width: 500px
-ms-overflow-x:scroll;
overflow-x:scroll;
white-space:nowrap;
}
.ShowcaseImage
{
height: 407px;
}
HTML: (Index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../Assets/CSS/dude.css" />
<title></title>
</head>
<body>
<div class="EditorialImagePaneOne">
<img src="../Assets/Images/Editorial/1-1.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-2.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-3.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-4.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-5.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-6.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-7.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-8.jpg" class="ShowcaseImage" />
</div>
</body>
</html>
I'm trying to get my DIV to display only a horizontal scrollbar. I am filling up the DIV with lots of images, and only want the user to be able to scrol horizontally.
But I have two problems:
One tutorial I read gave me some code (which I no longer have), that says it will display the scrollbar. But it didn't. And it also made the images appear beneath each other. So I scrapped that code.
Another tutorial gave me the 'look' that I wanted, but without the scrollbars. But the scrollbars were supposed to appear!
How can I have a DIV, full of pics and a Horizontal Scrollbar?
Here's what I have so far:
CSS: (dude.css)
.EditorialImagePaneOne
{
width: 500px
-ms-overflow-x:scroll;
overflow-x:scroll;
white-space:nowrap;
}
.ShowcaseImage
{
height: 407px;
}
HTML: (Index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../Assets/CSS/dude.css" />
<title></title>
</head>
<body>
<div class="EditorialImagePaneOne">
<img src="../Assets/Images/Editorial/1-1.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-2.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-3.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-4.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-5.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-6.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-7.jpg" class="ShowcaseImage" />
<img src="../Assets/Images/Editorial/1-8.jpg" class="ShowcaseImage" />
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
也许您错过了页面中的
DOCTYPE之类的内容。请确保将其作为代码中的第一行，位于行上方：Maybe you miss something like the
DOCTYPEin the page.. make sure to have this as the very first line in your code, above the<html>line: