Верстка HTML-писем имеет свои особенности, так как почтовые клиенты поддерживают не все современные технологии и может потребоваться использование таблиц для раскладки, старые способы стилизации и инлайновые стили для лучшей совместимости.
Сначала давайте улучшим верстку для размещения двух кнопок в одну строку с использованием таблиц, которые являются самым надежным способом в email-верстке.
Вот пример кода, который адаптирован для HTML email верстки:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML Email with Buttons</title>
<style>
/* Внешние стили для примера. В HTML письмах желательно использовать инлайн-стили */
table {
width: 100%;
}
.button {
background-color: #4CAF50;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
padding: 10px 20px;
border-radius: 2px;
}
</style>
</head>
<body>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
<tr>
<td style="padding: 10px;">
<!-- Первая кнопка -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="50%" align="left" style="float: left;">
<tr>
<td align="center" style="background-color: #4CAF50; border-radius: 2px;">
<a href="http://example.com" class="button" style="padding: 10px 20px; display: block; color: white; text-decoration: none;">Button 1</a>
</td>
</tr>
</table>
<!-- Вторая кнопка -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="50%" align="right" style="float: right;">
<tr>
<td align="center" style="background-color: #FFA500; border-radius: 2px;">
<a href="http://example.com" class="button" style="padding: 10px 20px; display: block; color: white; text-decoration: none;">Button 2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
```
Обратите внимание, что я использовал таблицы (`<table>`), которые выровнены влево и вправо (`align="left"` и `align="right"`) и их ширина равна 50% от контейнера. Это позволяет кнопкам размещаться на одной линии и занимать всю ширину родительского контейнера.
Как улучшить качество верстки HTML-писем:
1. Используйте инлайновые стили, так как не все почтовые клиенты поддерживают `<style>` теги или селекторы классов и id.
2. Верстайте с использованием таблиц, так как они обеспечивают наилучшую поддержку почтовыми клиентами и позволяют создать стабильную структуру.
3. Учитывайте ограничения почтовых клиентов (например, Gmail имеет множество ограничений по CSS).
4. Тестируйте письма в различных почтовых клиентах, используя такие сервисы, как Litmus или Email on Acid, для убедительности, что письма корректно отображаются на разных устройствах.