Pomoc w programowaniu, odpowiedzi na pytania / Html / HTML poziomy pasek przewijania - html, css, pasek przewijania

Poziomy pasek przewijania HTML - html, css, scrollbar

Próbuję dodać poziomy pasek przewijania do sekcji (<div>) strony HTML, ale z jakiegoś powodu tak nie jestpracujący. Sekcja strony zawiera wiele małych obrazów, które biegną poziomo w poprzek strony, ale nie chcę używać paska przewijania u dołu strony, aby przewijać wszystkie obrazy. Chcę tylko <div> sekcja, aby mieć pasek przewijania.

Sekcja HTML jest pokazana poniżej obok CSS, który próbowałem:

.photos .container {
position: absolute;
top: 700px;
background-color: #00FF00;
left: 10px;
width: 1500px;
height: 220px;
overflow-x: scroll;
}
.photos .container .row .img1 {
position: absolute;
left: 10px;
overflow: hidden;
}
.photos .container .row .img2 {
position: absolute;
left: 190px;
overflow: hidden;
}
.photos .container .row .img3 {
position: absolute;
left: 326px;
overflow: hidden;
}
.photos .container .row .img4 {
position: absolute;
left: 469px;
overflow: hidden;
}
.photos .container .row .img5 {
position: absolute;
left: 779px;
overflow: hidden;
}
.photos .container .row .img6 {
position: absolute;
left: 922px;
overflow: hidden;
}
.photos .container .row .img7 {
position: absolute;
left: 1058px;
overflow: hidden;
}
.photos .container .row .img8 {
position: absolute;
left: 1185px;
overflow: hidden;
}
.photos .container .row .img9 {
position: absolute;
left: 1485px;
overflow: hidden;
}
.photos .container .row .img10 {
position: absolute;
left: 1628px;
overflow: hidden;
}
.photos .container .row .img11 {
position: absolute;
left: 1774px;
overflow: hidden;
}

<div class="photos">
<div class="container">
<div class="row">
<div class="img1">
<img src="/images/imagesphotossmallimage_00001.jpg">
</div>
<div class="img2">
<img src="/images/imagesphotossmallimage_00002.jpg">
</div>
<div class="img3">
<img src="/images/imagesphotossmallimage_00003.jpg">
</div>
<div class="img4">
<img src="/images/imagesphotossmallimage_00004.jpg">
</div>
<div class="img5">
<img src="/images/imagesphotossmallimage_00005.jpg">
</div>
<div class="img6">
<img src="/images/imagesphotossmallimage_00006.jpg">
</div>
<div class="img7">
<img src="/images/imagesphotossmallimage_00007.jpg">
</div>
<div class="img8">
<img src="/images/imagesphotossmallimage_00008.jpg">
</div>
<div class="img9">
<img src="/images/imagesphotossmallimage_00009.jpg">
</div>
<div class="img10">
<img src="/images/imagesphotossmallimage_00010.jpg">
</div>
<div class="img11">
<img src="/images/imagesphotossmallimage_00011.jpg">
</div>
</div>
</div>
</div>

Odpowiedzi:

0 dla odpowiedzi № 1

Och, zrozumiałem to. Właśnie się zmieniłem: -

.photos .container {
position: absolute;
top: 700px;
background-color: #00FF00;
left: 10px;
width: 1500px;
height: 220px;
overflow-x: scroll;
}

to

.photos .container .row {
position: absolute;
top: 700px;
background-color: #00FF00;
left: 10px;
width: 1500px;
height: 220px;
overflow-x: scroll;
}