如何在html / css中的移动视图中水平滚动方框? [英] How to horizontal scroll square boxes in a mobile view in html/css?
本文介绍了如何在html / css中的移动视图中水平滚动方框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个网站,在桌面视图上看起来很完美。我也创建了
此时,在移动视图它适合屏幕,但不水平滚动。
解决方案
尝试更改:
.squares {
flex-wrap:nowrap;
}
.squares .square {
flex:1 0 auto;
}
这可以防止正方形进入第二行。
I have a website which looks perfect on the desktop view. I have created the fiddle as well so that its easy to make changes.
The snippets of CSS codes which I have used in order to align the squares in a row are:
.squares {
display: flex;
justify-content: space-between;
align-items:center;
padding: 1rem;
flex-wrap: wrap;
}
.squares .square {
width: 13%;
text-align: center;
height: 150px;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
border-style: solid;
border-width: 3px;
border-color: rgb(145, 147, 150);
border-radius: 10px;
}
Problem Statement:
I am wondering what CSS codes I should add here or change so that I am able to horizontally scroll the square boxes in a mobile view similar to the following screenshot:
At this moment, in the mobile view it is fit to the screen but not scrolling horizontally.
解决方案
Try also changing:
.squares{
flex-wrap: nowrap;
}
.squares .square{
flex: 1 0 auto;
}
This prevents the squares from going to the second line.
这篇关于如何在html / css中的移动视图中水平滚动方框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文