css - Отображение изображений с горизонтальной полосой прокрутки
Если Вы действительно хотите понять, что проектные решения, окружающие C++, находят копию Аннотируемый Справочник C++ Ellis и Stroustrup. Это не актуально с последним стандартом, но это проходит исходный стандарт и объясняет, как вещи работают и часто, как они получили тот путь.
5 ответов
Вам нужно будет отображать элементы списка встроенными или размещать их с плавающей точкой и давать ul очень большую ширину, чтобы элементы не перемещались на следующую строку:
ul {
width: 10000px; // for example
white-space: nowrap;
}
li {
float: left:
// or
display: inline;
}
Я бы пошел с
div#lasteventimg ul li {
display: inline;
}
, чтобы убедиться, что элементы li не отображаются как блочные.
Вам необходимо изменить свой список, чтобы элементы отображались по горизонтали, а не по умолчанию по вертикали.
#imagelist li
{
display: inline;
list-style-type: none;
}
Ну, прежде всего, вам нужно изменить свои стили с #event на # lasteventimg . Затем, если вы установите ширину ul , чтобы она была достаточно широкой, чтобы вместить все изображения, вы должны увидеть поведение, которое вы пытаетесь получить:
div#lasteventimg {
width: 150px;
overflow-x: scroll;
overflow-y: hidden;
}
div#lasteventimg ul { list-style: none; width: 300px; }
div#lasteventimg img {
width: 100px;
float: left;
}
<div id="lasteventimg">
<ul><li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
</ul>
</div>
Почему бы вам не попробовать это?
ul
{
width: 10000px;
white-space: nowrap;
}
li
{
display: block;
float:left;
}