在手機中控制內嵌塊元素大小在Gmail中

我試圖在電子郵件中設置一些鏈接，並且無法正確顯示它們。在手機中控制內嵌塊元素大小在Gmail中

<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無法可靠地使用媒體查詢，是否有任何方法使它們堆疊並在移動設備上以合理寬度顯示？

謝謝

來源

2016-09-19 Vecta

添加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>

來源

2016-09-19 21:17:22 LGSon

您可以使用表格將代碼帶回過去。這種技術只適用於電子郵件。

<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>

來源

2016-09-19 21:11:29 Alex

在手機中控制內嵌塊元素大小在Gmail中

回答

相關問題