手机屏幕上的水平滚动条答案

【问题标题】：Horizontal scrollbar on mobile screen手机屏幕上的水平滚动条
【发布时间】：2018-07-20 08:17:32
【问题描述】：

当我在桌面/大屏幕上查看我的网页时，没有水平滚动条，但是当我在小/移动屏幕上查看页面时，会出现一个水平条。我不希望那个水平条出现在任何屏幕上。你们能帮我解决这个问题，并指出我的代码中的问题吗？ Link to the web page

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0;
  }

html,
body {
      height: 100%;
      font-size: 100%;
      font-family: Arial, Helvetica, sans-serif;
     }

完整代码请点击提供的链接。

任何帮助都将不胜感激。谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

让我解释一下这个问题，在您的 codepen 链接 https://codepen.io/testube/full/VBmewj/ 中，您在 cite 类中使用 css left: 56rem 显示 quote。这是获取结果的不好方法，您可以改为设置right: 0 或如下所示进行

代替：

cite {
  text-align: right;
  position: absolute;
  left: 56rem;
}

使用

cite {
  text-align: right;
  display: block;
}

我在您的 codepen 上对其进行了测试，它工作正常。 :)

【讨论】：

实际上，我是 Web 开发的新手，通过书籍和在线资源自学。虽然，这个问题实际上是通过@Girish 的建议解决的，我从他们俩那里学到了新东西。谢谢大家。
很高兴为您提供帮助，请始终尝试解决问题，暂时不要添加黑客来解决问题。

【解决方案2】：

在 CSS 中你可以添加媒体查询代码

@media only screen and (max-width: 960px) {
cite {
    left: 0;
    right: 0;
    width: 100%;

}
}

【讨论】：