css - 将 div 调整为包含图像的宽度

Question

所以我正在创建一个从左向右滚动的图库。我想要做的是让保存图像的 div 调整到图像的组合宽度，这样你就不能滚动到最终图像到虚无中。目前我有一个固定的宽度。用内联 block 替换它不起作用(可能是因为 .country_holder 的 70% 宽度强制 block 行为？)这是我当前的代码:

    <ul>
    <li class="country_holder" id="c_scotland">
      <div class ="g_title" id="g_scotland"><h6>Scotland</h6></div>
      <div class="gallery_holder">
        <ul>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-1.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-2.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-3.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-4.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-5.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-6.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-7.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-8.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-9.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-10.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-11.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-12.jpg" height="150"></li>
          <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-13.jpg" height="150"></li>
         </ul>
      </div>
    </li>
    </ul>

CSS:

.country_holder {
  position:relative;
  margin-top:2rem;
  margin-bottom:2rem;
  width:70%;
  left:18.5%;
  display:block;
  overflow-y:scroll;
  overflow-x:hidden;
  overflow:-moz-scrollbars-horizontal;
  border:1px solid black;
}

.gallery_holder{
  width:4000px;
  height:150px;
  position:relative;
  background-color:none;
}

li.gallery_img{
  padding-right:2px;
  float:left;
  display:inline-block;
  vertical-align:top;
  height:150px;
}

Answer 1

纯 CSS 解决方案:

.country_holder {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 2rem;
  left: 18.5%;
  width: 70%;
  display: block;
  overflow-y: hidden;
  overflow-x: scroll;
  overflow: -moz-scrollbars-horizontal;
  border: 1px solid black;
}

.gallery_holder {
  white-space: nowrap;
  height: 150px;
  position: relative;
  background-color: none;
}

li.gallery_img {
  padding-right: 2px;
  display: inline-block;
  white-space:nowrap;
  vertical-align: top;
  height: 150px;
}

<ul>
  <li class="country_holder" id="c_scotland">
    <div class="g_title" id="g_scotland">
      <h6>Scotland</h6>
    </div>
    <div class="gallery_holder">
      <ul>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-1.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-2.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-3.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-4.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-5.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-6.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-7.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-8.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-9.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-10.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-11.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-12.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-13.jpg" height="150"></li>
      </ul>
    </div>
  </li>
</ul>

或者您可能只想滚动图像，而不是标题:

.country_holder {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 2rem;
  left: 18.5%;
  width: 70%;
  display: block;
  border: 1px solid black;
}

.gallery_holder {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.gallery_holder ul {
  white-space: nowrap;
  height: 150px;
  position: relative;
  background-color: none;
}

li.gallery_img {
  padding-right: 2px;
  display: inline-block;
  white-space:nowrap;
  vertical-align: top;
  height: 150px;
}

<ul>
  <li class="country_holder" id="c_scotland">
    <div class="g_title" id="g_scotland">
      <h6>Scotland</h6>
    </div>
    <div class="gallery_holder">
      <ul>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-1.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-2.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-3.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-4.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-5.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-6.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-7.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-8.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-9.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-10.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-11.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-12.jpg" height="150"></li>
        <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-13.jpg" height="150"></li>
      </ul>
    </div>
  </li>
</ul>