怎么做我的 list horizontal scroll

Question

这是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; 

Answer 1

移除左边的浮子并用显示内联块替换;

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

.scroll>ol{ display: flex; }

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