html - 如何使<ol>列表水平滚动

这是fiddle：

我正在尝试在<ol>列表上进行水平滚动

这是我的代码：

.scroll {
  overflow: auto;
  white-space: nowrap;
}

.card {
  float: left;
  width: 240px;
  list-style-type: none;
}

<section class="scroll">
  <ol>
    <li class="card">
      <a href="#">
        <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
      </a>
      <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>

    <li class="card">
      <a href="#">
        <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
      </a>
      <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>

    <li class="card">
      <a href="#">
        <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
      </a>
      <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>

    <li class="card">
      <a href="#">
        <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
      </a>
      <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>

    <li class="card">
      <a href="#">
        <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
      </a>
      <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>
  </ol>
</section>

我添加了这个，但是我不知道我的代码出了什么问题。

overflow: auto;
  white-space: nowrap;

最佳答案

拆下左侧的浮子，并用显示嵌入式块代替；

.scroll {
  overflow: auto;
  white-space: nowrap;
}
.card {
    display: inline-block;
	width:240px;
	list-style-type:none;
}

<section class="scroll">
		    <ol>
			    <li class="card">
				    <a href="#">

					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />

					</a>

					<p class="castname"><a href="#">Aamir Khan</a></p>

				</li>


				<li class="card">
				    <a href="#">

					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>

					</a>

					<p class="castname"><a href="#">Aamir Khan</a></p>

				</li>

				<li class="card">
				    <a href="#">

					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>

					</a>

					<p class="castname"><a href="#">Aamir Khan</a></p>

				</li>

				<li class="card">
				    <a href="#">

					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>

					</a>

					<p class="castname"><a href="#">Aamir Khan</a></p>

				</li>

				<li class="card">
				    <a href="#">

					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>

					</a>

					<p class="castname"><a href="#">Aamir Khan</a></p>

				</li>


	        </ol>


	</section>

关于html - 如何使<ol>列表水平滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44724554/