Divi主题自定义并排链接屏幕缩放时布局断裂问题求助

问题背景 #

在Divi主题模块中手动创建了三个自定义按钮链接，预期实现三链接并排展示，但屏幕缩放（尚未切换到平板尺寸）时，链接布局会断裂，无法保持横向排列。

解决方案 #

核心是用**弹性布局（Flexbox）**替代原有的文本流布局，确保链接在不同宽度下稳定并排：

修改后的HTML代码 #

<div class="link-container">
  <a class="work" href="/work-with-me">
    <span style="font-family: ETmodules; font-size: 1.5em; font-weight: 300; position: relative; top: .15em;">&#xe0ef;</span> WORK WITH ME
  </a>
  <a class="podcast" href="/work-with-me">
    <span style="font-family: ETmodules; font-size: 1.5em; font-weight: 300; position: relative; top: .15em;">&#xe01b;</span> PODCAST
  </a>
  <a class="speak" href="/speaking">
    <span style="font-family: ETmodules; font-size: 1.5em; font-weight: 300; position: relative; top: .15em;">&#xe031;</span> SPEAKING
  </a>
</div>

修改后的CSS代码 #

/* 弹性布局容器，控制链接排列 */
.link-container {
  display: flex;
  justify-content: center;
  gap: 15px; /* 链接间的固定间距，替代原有的  */
  flex-wrap: nowrap; /* 强制不换行，保证横向排列 */
  overflow-x: auto; /* 极端窄屏时允许横向滚动，避免布局错乱 */
  padding: 0 10px; /* 左右留边，防止链接贴紧屏幕边缘 */
}

/* 统一所有链接的基础样式，减少冗余 */
.link-container a {
  font-size: .5em;
  font-family: "helvetica", sans-serif;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 10px 16px; /* 适度减少内边距，让链接更紧凑 */
  border-radius: 50px;
  color: white;
  white-space: nowrap; /* 禁止文字内部换行 */
  display: inline-flex;
  align-items: center; /* 图标与文字垂直居中对齐 */
  gap: 6px; /* 图标和文字的间距 */
}

/* 各链接的背景色及 hover 样式 */
.link-container a.work {
  background-color: #b7ad68;
}
.link-container a:hover.work {
  background-color: #ffffff;
  border: solid 2px #b7ad68;
  color: #b7ad68;
}

.link-container a.podcast {
  background-color: #f1b36e;
}
.link-container a:hover.podcast {
  background-color: #ffffff;
  border: solid 2px #f1b36e;
  color: #f1b36e;
}

.link-container a.speak {
  background-color: #e58059;
}
.link-container a:hover.speak {
  background-color: #ffffff;
  border: solid 2px #e58059;
  color: #e58059;
}

关键修改点 #

1. 用flex布局容器替代原<p>标签，精准控制链接的排列方式
2. 用gap属性替代 ，实现更可靠的间距控制
3. 给链接添加white-space: nowrap，避免文字内部换行导致布局断裂
4. 统一链接基础样式，简化代码结构
5. 极端窄屏时启用横向滚动，保证布局可用性

内容的提问来源于stack exchange，提问作者Jessica Moore