css - Squarespace 在同一行上的等距 anchor 链接

Question

我一直在互联网和 Squarespace 论坛上搜索这个问题的答案，但到目前为止找不到任何运气!我了解基本代码和 CSS，但我自己似乎无法弄清楚这一点 :(

我正在尝试在索引上制作一行 anchor 链接，一行上有等距的文本链接。当我通过平板电脑或手机 View 查看我现在拥有的内容时，它们会以一种简陋的方式被分解。

有没有办法:限制这一点以便它们保持在一条线上，或者以某种方式进行调整以便它们整齐地堆叠在一起？

我正在尝试在此处为“Community Workspace Progamming”链接效果重新创建一些内容 (https://www.the-wing.com/why-the-wing/)

附上我的网站在平板电脑 View 中发生的情况的图像。

image here

Answer 1

如果您只是想在屏幕变小时将它们堆叠在顶部(例如在手机或平板电脑中，那么这样做就可以:

.menu li {
  list-style-type: none;
  display: inline-block;
  padding-right: 30px;
}

@media (max-width: 760px) {
  .menu li {
    display: block;
    text-align: center;
  }
}

<div class="menu">
  <li><h2>LOCATIONS</h2></li>
  <li><h2>EVENTS</h2></li>
  <li><h2>PERSONAL STYLING</h2></li>
</div>

它根据屏幕大小而变化，因此在大于 760px 的屏幕中全部排成一行，在较小的屏幕中则堆叠在一起。您可以在@media 更改该大小以满足您的需要。

但是，您所链接的网站使用的是所谓的汉堡菜单。这是我 found online 的一个很好的实现，但实现起来有点复杂。

我对 Squarespace 一无所知，但如果我是你，我会在模板的文档中查找模板的汉堡菜单。希望对您有所帮助!