HTML水平滚动条

Question

我正在尝试将水平滚动条添加到HTML页面的某个部分（<div>），但由于某种原因它无效。页面的一部分包含许多在页面上水平延伸的小图像，但我不想使用页面底部的滚动条滚动浏览所有图像。我只想让<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;
}