html - 在按钮中包含 HTML 箭头

Question

我正在设计一个 HTML 电子邮件，并希望在 HTML 按钮上包含一个右箭头，我求助于使用特殊字符并对其进行变换旋转。

我的问题是，现在它们出现在不同的行上。如何将文本和箭头换行以仅显示在一行中？我尝试在 td 元素上使用 whitespace:no-wrap ，但这似乎没有用。下面是代码片段。

<tr>
    <td class="call-to-action" align="center">
        <button type="button" class="call-to-action1" value="Schedule Online Here" style="white-space:nowrap">SCHEDULE ONLINE HERE
            <h1 class="little-arrow" style="-ms-transform: rotate(270deg);transform: rotate(270deg);-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */; color: white; font-size:14px">&#8711</h1></button>
    </td>
</tr>

Answer 1

箭头在下一行中断 - 因为您正在使用 h1 作为 block 元素的箭头。只需使用 span ，它就会在一行中。

<tr>
    <td class="call-to-action" align="center">
        <button type="button" class="call-to-action1" value="Schedule Online Here" style="white-space:nowrap">SCHEDULE ONLINE HERE
            <span class="little-arrow" style="-ms-transform: rotate(270deg);transform: rotate(270deg);-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */; color: white; font-size:14px; display: inline-block">&#8711</span></button>
    </td>
</tr>

使用 h1 使用相同的 h1 标签可以实现相同的布局。只需使用 display:inline-block 将它们放在一行中 -

.button,
.little-arrow {
  display: inline-block
}

.little-arrow {
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  /* Chrome, Safari, Opera */
  ;
  color: white;
  font-size: 14px;
  color: red
}

<tr>
  <td class="call-to-action" align="center">
    <button type="button" class="call-to-action1" value="Schedule Online Here">SCHEDULE ONLINE HERE
      <h1 class="little-arrow">&#8711;</h1></button>
  </td>
</tr>