【问题标题】:How to get rid of this horizontal scroll bar如何摆脱这个水平滚动条
【发布时间】:2017-08-02 06:33:15
【问题描述】:

对于我的生活,我似乎无法摆脱this site 底部的水平滚动条。我已经尝试了一切(在我的能力范围内)并且想知道是否有人可以为我阐明它。

提前致谢。

【问题讨论】:

  • 作为一个非常基本的答案,您可以将overflow-x: hidden 设置为body 标签。虽然我建议尝试确定为什么元素的宽度总是大于窗口...
  • 谢谢你,我会破解的。我一天中的大部分时间都在试图找出是什么破坏了它,但我找不到问题。
  • 编辑:这行得通,但我会放弃它,看看是否有人能找到问题。再次感谢。

标签: html css scroll width


【解决方案1】:

你有两个选择:

忽略所有的间距

<style>

body {
    overflow-x:hidden;
}

</style>

或者您可以检查所有的 CSS,并确保您不会意外出现任何“出血”边框或边距/填充。

当您将元素的宽度设置为 20% 并且其中有 5 个元素时,会发生出血,但随后添加 10px 的边距会导致部分元素流失。

JSFiddle 示例:

https://jsfiddle.net/nfnneil/9dcdurnj/4/

你注意到第四个元素在第二行吗?这是因为边距发生在样式对象之外。

注意:还有很多其他方式会导致出血。比如,没有适当调整的边框等。

我个人会选择overflow-x:hidden,但那是因为我很懒。但是,通过使用惰性方式 overflow-x:hidden,您可能会影响代码的某些未来用途。话虽如此,我认为您应该只使用我们overflow-x:hidden。

【讨论】:

    【解决方案2】:

    .row.vc_custom_1488973579542(带有大标题的那个)不是.container 的直系子代,而是&lt;section&gt; 的直系子代。

    您的主题使用基于 Bootstrap 列的网格布局系统,该系统在 .containers 上使用左/右填充,在 .rows 上使用相应的左/右负边距。在全角模式下,不在.container 中放置顶级.rows 会导致25px 大于&lt;body&gt; 的行,从而创建一个水平滚动条。

    可能的修复:

    • 将此.row 放在.container 中(推荐)
    • 为其覆盖默认行边距:
    .row.vc_custom_1488973579542 { 
      margin-left:0;
      margin-right:0; 
    }
    
    • 隐藏溢出(不推荐):
    body {
      overflow-x: hidden;
    }
    

    【讨论】:

    • 非常感谢。两者都有效,但与推荐的一致。再次感谢。
    猜你喜欢
    • 1970-01-01
    • 2011-06-25
    • 2013-09-09
    • 2023-01-05
    • 2016-08-17
    • 2020-09-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-14
    相关资源
    最近更新 更多