Pomoc pri programovaní, odpovede na otázky / html / HTML horizontálny posuvník - html, css, posuvník

HTML horizontálny posuvník - html, css, posuvník

Snažím sa pridať horizontálnu posuvnú lištu do sekcie (<div>) stránky HTML, ale z nejakého dôvodu to tak nie jePracovné. Časť stránky obsahuje niekoľko malých obrázkov, ktoré sa zobrazujú horizontálne naprieč stránkou, ale nechcem používať rolovaciu lištu v dolnej časti stránky na prechádzanie všetkými obrázkami. Chcem len <div> sekciu, aby ste mali posuvník.

Časť kódu HTML je zobrazená nižšie vedľa CSS, ktorú som skúsil:

.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>

odpovede:

0 pre odpoveď č. 1

Prišiel som na to. Zmenil som: -

.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;
}