在按鈕中包含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爲這是塊元素的箭頭。只需使用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>