HTML горизонтальная полоса прокрутки

Question

Я пытаюсь добавить горизонтальную полосу прокрутки в раздел (<div>) страницы HTML, но по какой-то причине он не работает. Раздел страницы содержит несколько небольших изображений, которые идут горизонтально по странице, но я не хочу использовать полосу прокрутки в нижней части страницы для прокрутки всех изображений. Я просто хочу, чтобы раздел <div> имел полосу прокрутки.

В разделе HTML показана ниже вместе с CSS, что я пытался:

.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\photos\small\image_00001.jpg"> 
 
     </div> 
 
     <div class="img2"> 
 
     <img src="images\photos\small\image_00002.jpg"> 
 
     </div> 
 
     <div class="img3"> 
 
     <img src="images\photos\small\image_00003.jpg"> 
 
     </div> 
 
     <div class="img4"> 
 
     <img src="images\photos\small\image_00004.jpg"> 
 
     </div> 
 
     <div class="img5"> 
 
     <img src="images\photos\small\image_00005.jpg"> 
 
     </div> 
 
     <div class="img6"> 
 
     <img src="images\photos\small\image_00006.jpg"> 
 
     </div> 
 
     <div class="img7"> 
 
     <img src="images\photos\small\image_00007.jpg"> 
 
     </div> 
 
     <div class="img8"> 
 
     <img src="images\photos\small\image_00008.jpg"> 
 
     </div> 
 
     <div class="img9"> 
 
     <img src="images\photos\small\image_00009.jpg"> 
 
     </div> 
 
     <div class="img10"> 
 
     <img src="images\photos\small\image_00010.jpg"> 
 
     </div> 
 
     <div class="img11"> 
 
     <img src="images\photos\small\image_00011.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

О, я понял. Я только что изменил: -

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