Я пытаюсь заставить 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>
Возможно, вы пропустите что-то вроде DOCTYPE
на странице. Убедитесь, что это как первая строка в коде, выше строки <html>
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">