DIV不显示水平滚动条 [英] DIV not displaying Horizontal Scrollbar
问题描述
我试图让我的DIV只显示水平滚动条。我用很多图片填充DIV，只希望用户能够水平滚动。
但是我遇到了两个问题：
我读过的一个教程给了我一些代码（我不再有），它会显示滚动条。但事实并非如此。它也使图像显示在彼此之下。所以我放弃了这段代码。
另一个教程给了我想要的'外观'，但没有滚动条。但滚动条应该出现！
如何获得DIV，充满图片和水平滚动条？
CSS：（dude.css）
Vectors $ a
{
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 =stylesheethref =../ Assets / CSS / dude.css/>
< title>< / title>
< / head>
< body>
< div class =EditorialImagePaneOne>
< img src =../ Assets / Images / Editorial / 1-1.jpgclass =ShowcaseImage/>
< img src =../ Assets / Images / Editorial / 1-2.jpgclass =ShowcaseImage/>
< img src =../ Assets / Images / Editorial / 1-3.jpgclass =ShowcaseImage/>
< img src =../ Assets / Images / Editorial / 1-4.jpgclass =ShowcaseImage/>
< img src =../ Assets / Images / Editorial / 1-5.jpgclass =ShowcaseImage/>
< img src =../ Assets / Images / Editorial / 1-6.jpgclass =ShowcaseImage/>
< img src =../ Assets / Images / Editorial / 1-7.jpgclass =ShowcaseImage/>
< img src =../ Assets / Images / Editorial / 1-8.jpgclass =ShowcaseImage/>
< / div>
< / body>
< / html>
也许你错过了像 DOCTYPE ，确保在你的代码中的第一行，在< html> 行之上：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp：// www。 w3.org/TR/html4/strict.dtd\">
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>
Maybe you miss something like the DOCTYPE in the page.. make sure to have this as the very first line in your code, above the <html> line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
这篇关于DIV不显示水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
