Question

我有一个导航元素，其样式如下：

nav {
  width: 100%;
  padding: 10px 0;
  background-color: #044fc5;
  display: flex;
  justify-content: space-around;
  overflow-x: auto;
}

nav li {
  list-style-type: none;
  background-color: white;
  padding: 10px 36px;
  margin: 10px;
  text-align: center;
}

<nav>
  <li>ONE</li>
  <li>TWO</li>
  <li>THREE</li>
  <li>FOUR</li>
  <li>FIVE</li>
  <li>SIX</li>
  <li>SEVEN</li>
  <li>EIGHT</li>
</nav>

我希望lis的间距均匀，所以我使用了：

justify-content: space-around;

我希望用户在屏幕调整为小于导航仪中的可用空间时能够滚动浏览内容。

我假设添加overflow-x: auto;可以做到这一点，除了用户无法滚动浏览所有内容之外，它的工作方式还算不错。

他们可以从某个点滚动到导航结束，但不能滚动到最后10px左右。

有什么想法在这里吗？任何帮助表示赞赏！

Overflow-x无法与我的Flex容器一起使用

0 个答案: