<div class="main">
<ul>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
</ul>
</div>
<style>
.main{
width: 600px;
margin: 0 auto;
}
.main ul{
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
height: 200px;
white-space: nowrap;
}
.main ul li{
display: inline-block;
width: 150px;
height: 150px;
background: red;
}
.main ul li div{
float: right;
display: flex;
width: 60px;
height: 100%;
flex-direction: column;
justify-content: center;
}
</style>
<ul>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
<li>
<div>
<span>英语</span>
<span>English</span>
</div>
</li>
</ul>
</div>
<style>
.main{
width: 600px;
margin: 0 auto;
}
.main ul{
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
height: 200px;
white-space: nowrap;
}
.main ul li{
display: inline-block;
width: 150px;
height: 150px;
background: red;
}
.main ul li div{
float: right;
display: flex;
width: 60px;
height: 100%;
flex-direction: column;
justify-content: center;
}
</style>