用于平方空间的同一条直线上的等距锚链

Question

我一直在Internet和Squarespace论坛上寻找有关此问题的答案，但到目前为止找不到任何运气！我了解基本的代码和CSS，但我自己似乎无法弄清楚这一点：（

我正在尝试在索引上创建一条锚定链接，并在一行上等距放置文本链接。当我通过“平板电脑”或“电话”视图查看我现在拥有的东西时，它们会以混乱的方式分解。

有没有一种方法：限制它以使它们停留在一条线上，或者以某种方式进行调整以使它们整齐地堆叠在彼此的顶部？

我正在尝试为此处的“社区工作区编程”链接效果重新创建一些东西（https://www.the-wing.com/why-the-wing/）

附有平板电脑视图中我的网站的运行状况的图像。

image here

Answer 1

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

<div class="menu">

.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上更改该大小以适合您的需求。

但是，您链接的网站正在使用所谓的汉堡菜单。 [这是我在网上找到的一个很好的实现] [1]，但是实现起来有点复杂。

我对Squarespace一无所知，但是如果我是你，我会在模板的文档中寻找我的模板的Burger Menu。希望对您有所帮助！