屏幕大小调整后，我的链接在视觉上就会中断

Question

我正在 divi 主题的模块中手动创建自己的链接，因为 divi 不支持并排三个链接。

它应该看起来像这样：

但是当屏幕调整大小时，它看起来像这样：

Divi 在某些时候会中断其响应，这种情况发生在它达到平板电脑尺寸之前。

这是我放置在模块 CSS 中的代码：

a.work {
  background-color: #b7ad68;
  font-size: .5em;
  font-family: "helvetica", san-serif;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 10px 20px 10px 20px;
  border-radius: 50px;
  color: white;
}

a:hover.work {
  background-color: #ffffff;
  border: solid 2px #b7ad68;
  color: #b7ad68;
}

a.podcast {
  background-color: #f1b36e;
  font-size: .5em;
  font-family: "helvetica", san-serif;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 10px 20px 10px 20px;
  border-radius: 50px;
  color: white;
}

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

a.speak {
  background-color: #e58059;
  font-size: .5em;
  font-family: "helvetica", san-serif;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 10px 20px 10px 20px;
  border-radius: 50px;
  color: white;
}

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

<p style="text-align: center;">
  <a class="work" href="/work-with-me">
    <span style="font-family: ETmodules; font-size: 1.5em; font-weight: 300; padding-top: 10px; position: relative; top: .15em;">&#xe0ef;</span>&nbsp;WORK WITH ME</a>&nbsp;&nbsp;<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>&nbsp;PODCAST</a>&nbsp;&nbsp;
  <a
    class="speak"><span style="font-family: ETmodules; font-size: 1.5em; font-weight: 300;position: relative; top: .15em;">&#xe031;</span>&nbsp;SPEAKING</a>
</p>

Answer 1

这些链接包含

span

元素，默认情况下这些元素是内联的，因此会像常规文本一样中断。为了避免这种情况，您可以将跨度或这些链接定义为

inline-block

，这样它们就不会像常规文本那样被分割/破坏。为此，添加以下规则：

a.work,
a.podcast,
a.speak {
  display: inline-block;
}

a.work,
a.podcast,
a.speak {
  display: inline-block;
}

a.work {
  background-color: #b7ad68;
  font-size: .5em;
  font-family: "helvetica", san-serif;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 10px 20px 10px 20px;
  border-radius: 50px;
  color: white;
}

a:hover.work {
  background-color: #ffffff;
  border: solid 2px #b7ad68;
  color: #b7ad68;
}

a.podcast {
  background-color: #f1b36e;
  font-size: .5em;
  font-family: "helvetica", san-serif;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 10px 20px 10px 20px;
  border-radius: 50px;
  color: white;
}

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

a.speak {
  background-color: #e58059;
  font-size: .5em;
  font-family: "helvetica", san-serif;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 10px 20px 10px 20px;
  border-radius: 50px;
  color: white;
}

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

<p style="text-align: center;">
  <a class="work" href="/work-with-me">
    <span style="font-family: ETmodules; font-size: 1.5em; font-weight: 300; padding-top: 10px; position: relative; top: .15em;">&#xe0ef;</span>&nbsp;WORK WITH ME</a>&nbsp;&nbsp;<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>&nbsp;PODCAST</a>&nbsp;&nbsp;
  <a
    class="speak"><span style="font-family: ETmodules; font-size: 1.5em; font-weight: 300;position: relative; top: .15em;">&#xe031;</span>&nbsp;SPEAKING</a>
</p>