Question

当我在桌面/大屏幕上查看网页时，没有水平滚动条，但是当我在小/移动屏幕上查看页面时，出现了水平条。我不希望该水平条出现在任何屏幕上。你们可以帮我解决这个问题，并指出我代码中的问题吗？ 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;
     }

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

任何帮助都是非常有意义的。谢谢。

Answer 1

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

代替：

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

使用

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

我在您的Codepen上对其进行了测试，效果很好。：）

Answer 2

在CSS中，您可以添加mediaquery代码

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

}
}

手机屏幕上的水平滚动条

2 个答案: