Размер элемента управления Inline Block на мобильном телефоне в 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>