如何将带有顶部选项卡的选项卡式部分交换为侧面的选项卡？

Question

我有这个页面的客户：https://www.thedestinationproject.com/travel-abcs.

有一个选项卡部分，其中包含字母 a-z。问题是，在移动设备上，它变得可滚动，大多数人看不到或使用它。

他们正在使用 ionos 网站创建者，没有设置垂直选项卡框（我能找到）的选项。

我的解决方案是将选项卡移动到内容框的左侧。

我想这就像改变宽度、显示和浮动一样简单。

首先，我试过这个：

.widget-7b2ba5 .nav {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width: 5%;
    float:left;
}

.widget-7b2ba5 .tab {
    display: flex;
    text-align: left !important;
    flex: 1 1 0%;
    flex-basis: auto;
    flex-direction: column;
    justify-content: space-around;
    align-content: flex-start;
    padding-top: 30px;
    max-width: 100%;
    width: 95%;
    float: left;
}

那没有用，所以我想我会把它从弹性盒子里拿出来，因为我还在学习如何正确地管理它们并这样做了：

.widget-7b2ba5 .nav {
    display: block;
    width: 5%;
    float:left;
}

.widget-7b2ba5 .tab {
    display: block;
    text-align: left !important;
    padding-top: 30px;
    width: 95%;
    float: left;
}

为了以防万一，我尝试了不同的宽度，但似乎没有任何效果。谁能指出我改变这个的正确方向？

Answer 1

应该这样做：

.widget-7b2ba5 .wrapper {
  flex-direction: row;
}

.widget-7b2ba5 .nav {
  flex-direction: column;
}

.widget-7b2ba5 .tab .tab-text-container {
  justify-content: unset;
}

首先，您将

.wrapper

flex-direction

从

column

更改为

row

，因此菜单出现在内容的左侧。 然后将

.nav

flex-direction

从

row

更改为

column

，这样字母就会一个接一个地出现，而不是并排出现。 最后，删除设置为

.tab-text-container

的

justify-content

center

，这样元素之间就没有很大的空间了。