javascript - 在整个页面上展开导航栏

Question

我正在做一些响应式 CSS，我想要这样的东西：

<body>
<nav>
<ul>
 <li>Asd</li>
 <li>sdf</li>
</ul>
</nav>
<table>
 (Some wide table goes here)
</table>

我将导航定义为页面顶部的条（=水平条）。对于小屏幕（当表格太大时），会出现水平滚动条。

我的问题是，当我水平滚动时，导航栏会向左移动并在右侧留下空白区域。我只是希望它是可见的，以保持酒吧的印象。有什么想法吗？

我知道，其中之一是位置：固定，因此导航保持固定，但这也意味着即使使用垂直滚动，导航也会固定，这是我不想要的。

我只希望它与整个页面一样宽（而不仅仅是与屏幕一样宽），同时也可以垂直滚动。（如果发生水平滚动时导航内容也滚动，或者导航内容刚刚滚动并且只有导航背景（和导航边框等），这对我来说并不重要）

score 0 · Accepted Answer

使用 CSS，position:absolute; left:0;（当页面滚动时阻止它从网页屏幕的左侧移开。）

score 0 · Accepted Answer

我不确定我是否完全理解您，但我认为您的问题的解决方案是使用 CSS 设置overflow: hidden参数。

您可以使用内部/外部 CSS<style>中的标签来执行此操作，如下所示：<head>

<head>
  <style>
    table {
      display: flex;
      overflow: hidden;
    }
  </style>
</head>

否则，您可以使用带有样式属性的内联 CSS 直接添加它，这不会占用太多空间，但仅适用于该特定表格（而不是页面上的所有表格）。例如：

<body>
  <table style="overflow:hidden">
   (Some wide table goes here)
  </table>
</body>

2 回答 2