【问题标题】:Avoiding horizontal scroll in desktop view in html/css避免在 html/css 中的桌面视图中水平滚动
【发布时间】:2018-05-24 14:16:00
【问题描述】:

我正在工作的网站中,我确实不想在桌面视图中进行任何水平滚动,而移动视图看起来很完美(它应该是滚动的)。

我为它创建了fiddle,以便于进行更改。

我想要的桌面视图是:

为了获得水平滚动,我在小提琴中使用的 CSS 代码是:

.squares {
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 1rem;
    position: relative;
    width: 70%;
    max-width: 1080px;
    overflow-x:auto;
    margin: auto;
}

问题陈述:

我想知道我应该在上面的小提琴中进行哪些更改,以便在桌面视图中没有水平滚动。移动视图在fiddle 中看起来很完美。

【问题讨论】:

    标签: html css media-queries horizontal-scrolling


    【解决方案1】:

    使用媒体查询将您的 CSS 更改为包含 overflow-x:hidden,而不是 overflow-x:auto

    编辑:

    你想要这个...

    @media screen and(min-width:769px) {
        .squares {
            overflow-x:hidden;
        }
     }
    

    这针对任何超过平板电脑大小的东西(但不是纵向 ipad),希望这会有所帮助。

    【讨论】:

    • 我很确定 CSS 代码会进入其中 @media only screen and (max-width: 767px) { . } 但我不确定这里会出现什么确切代码。抱歉,我不擅长媒体查询。
    • 我有一个类似的question。我想知道你是否可以帮助我。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-05-15
    • 1970-01-01
    • 2018-11-03
    • 1970-01-01
    • 2014-11-05
    • 1970-01-01
    • 2017-03-31
    相关资源
    最近更新 更多