css - 使该网站内容水平适合且仅垂直溢出的最有效方法

Question

我还在学习，如果我有任何不正确的术语，请原谅我。

我正在尝试以我想要的方式使项目适合屏幕，并尝试使用我的浏览器（chrome）中的开发人员工具来修改现有网页。

我发现了一个网页，要求您在放大时水平和垂直滚动。

我想以某种方式查看页面，以便无论我放大多少（例如CTRL+ 鼠标滚轮向上），它都不需要水平滚动。

我认为添加：

overflow-x: hidden;
overflow-y: scroll;

到身体可能会修复它，但它没有。

这是有问题的网站。

这是来自维基百科的一个例子，它显示了我所指的效果。

任何和所有的见解/提示将不胜感激。

标签： css

Answer 1

滚动条由#topmenu_lg. 放大时，歌曲索引表中字母的字体大小会增加，并超过可用的正文宽度。

为了轻松可视化这一点，请将此 CSS 添加到您的页面：

@media screen and (min-width: 600px) {
  #topmenu_lg {
    overflow-x: auto;
    max-width: 90%;
  }
}

您需要想出一种响应式显示这些索引的方法。

使用<table>元素进行布局是可以接受的……大约 30 年前。