如何使我的<ol>列表水平滚动

Question

这是fiddle：

我正在尝试在<ol>列表

上进行水平滚动

这是我的代码：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

overflow: auto;
  white-space: nowrap; 

Answer 1

.scroll>ol{ display: flex; }

Answer 2

删除左边的浮动并替换为display inline-block;

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

Answer 3

white-space:nowrap仅适用于inline和inline-block元素。

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

Answer 4

您需要做的只是改变

overflow: auto;

到

overflow-y: scroll;

然后设置滚动的宽度和高度。这是我的JSFiddle