<li> 中的字幕与 CSS 内联不对齐

Question

我正在努力制定并遵循电子邮件邮寄的最佳做法，但无论如何我都尝试对齐我的

标签的 "subtitle"，但每次都失败。

我的 PSD 上有这个列表用于电子邮件邮寄：

这是我的代码：

<div style="width:600px; height:50px">
 <span style="color:#e2e478; font-family:'Arial'; font-size:14px; margin-left:23px; line-height:75px">HOTELES PARTICIPANTES</span>
</div>

<div style="width:600px; height:542px; color:#ffffff; font-family:'Arial'; font-size:13px;">
 <ul style="line-height:25px; columns:2">
  <li style="margin-left:7px;">Belmond La Samanna</li>
   <span>San Marino</span>
  <li style="margin-left:-7px;">Belmond Maroma Resort & Spa</li>
   <span>Riviera Maya, México</span>
  <li style="margin-left:-7px;">Belmond Casa de Sierra Nevada</li>
   <span>San Miguel de Allende, México </span>
  <li style="margin-left:-7px;">Belmond El Encanto</li>
   <span>Santa Bárbara, EE.UU.</span>
  <li style="margin-left:-7px;">Belmond Charleston Place </li>
   <span> Charleston, EE.UU.</span>
  <li style="margin-left:-7px;">Inn at Perry Cabin by Belmond</li>
   <span>St. Michaels, EE.UU.</span>
  <li style="margin-left:-7px;">Belmond Copacabana Palace</li>
   <span>Rio de Janeiro, Brazil </span>
 </ul>
</div>

也许这段代码有一些错误，我将不胜感激！

Answer 1

它没有对齐，因为您将下面的文本放在一个单独的范围内，而不是相同的包装 li 标签

原文： <li style="margin-left:7px;">Belmond La Samanna</li><span>San Marino</span>

新：

<li style="margin-left:7px;">Belmond La Samanna <br> <span>San Marino</span></li>

希望对您有所帮助

Answer 2

尝试


    ul {
        width: 500px;
    }

    li {
        width: 50%;
        float: left;
    }

Answer 3

您需要将 margin-left:-7px 替换为 margin-left:7px 并将 span 放入 li

https://jsfiddle.net/MostafaB/u4dpa7e6/2/

Answer 4

下面的代码应该可以工作：

<div style="background-color: black">

    <style>
    .title-bloc {
        width: 600px;
        height: 50px;
    }

    .title {
        color: #e2e478;
        font-family: 'Arial';
        font-size: 14px;
        margin-left: 23px;
        line-height: 75px;
    }

    .list-container {
        width: 600px;
        height: 542px;
        color: #ffffff;
        font-family: 'Arial';
        font-size: 13px;
    }

    ul {
        line-height: 25px;
        columns: 2;
        margin-left: 10px;
    }

    li {
        color: #e2e478;
    }

    span {
        color: white;
    }
    </style>

    <div class="title-bloc">
        <span class="title">HOTELES PARTICIPANTES</span>
    </div>

    <div class="list-container">
        <ul>
            <li>Belmond La Samanna<br>
                <span>San Marino</span></li>
            <li>Belmond Maroma Resort & Spa<br>
                <span>Riviera Maya, México</span></li>
            <li>Belmond Casa de Sierra Nevada<br>
                <span>San Miguel de Allende, México </span></li>
            <li>Belmond El Encanto<br>
                <span>Santa Bárbara, EE.UU.</span></li>
            <li>Belmond Charleston Place<br>
                <span> Charleston, EE.UU.</span></li>
            <li>Inn at Perry Cabin by Belmond<br>
                <span>St. Michaels, EE.UU.</span></li>
            <li>Belmond Copacabana Palace<br>
                <span>Rio de Janeiro, Brazil </span></li>
        </ul>
    </div>

</div>

Answer 5

一般来说，某些电子邮件客户端（尤其是 Outlook）对列表的支持不是很好。为了让列表在任何地方都能正确显示，最佳做法通常是将它们制作成表格，而不是使用 ul/li。例如：

<table border="0" cellpadding="0" cellspacing="0">
    <tr><td valign="top" style="color: #796e65; text-align:left;font-size:14px;line-height: 105%; padding: 0 4px 0 24px;">
            &bull;
        </td>
        <td style="color: #796e65; text-align:left;font-size:14px;line-height: 105%; padding: 0 0 0 0;">
            Lorem ipsum dolor sit amet
        </td>
    </tr>
</table>

<li> 中的字幕与 CSS 内联不对齐

Subtitle in <li> is not align with CSS inline

html

css

email

inline

html-email