控制行内块元素的大小在移动Gmail

Question

我试图在电子邮件中设置一些链接，我有麻烦让他们正确显示。

<p style="display: block; text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</p>

它们在桌面上看起来很好(并排)。在手机上，我希望它们堆叠起来，但正如预期的那样，它们只占屏幕的45%，这太小了。

既然我不能可靠地使用媒体查询，因为Gmail，有没有办法使他们堆叠，并出现在一个合理的宽度在手机上?

谢谢

Answer 1

将min-width添加到您的锚点，并且由于您重新设计了p的样式，因此使用div代替。

<div style="text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
    <a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
    <a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</div>

Answer 2

您可以使用表格将代码带回到过去。这种技术只有在只用于电子邮件时才可靠。

<table width="500px">
  <tbody>
    <tr>
      <td width="50%"><a href="http://example.com">Link one</a></td>
      <td width="50%"><a href="http://example.com">Link two</a></td>
    </tr>
  </tbody>
</table>