2016-03-01 208 views
0

我正在设计一个HTML电子邮件,并希望在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>

回答

4

箭是打破在下一行 - 因为你使用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>

+0

而这解决了线路问题,它会导致旋转到不行(如箭头再次指向下方)。我在这里做错了什么?只能旋转块元素吗? – lokimart

+0

将显示更改为内嵌块作品,谢谢! – lokimart