如何在 email 中為有序列表項編號添加前綴？

Question

我需要列出一個類似的列表：

question 1: What if?
question 2: What if?
question 3: What if?

我知道這在 CSS 中很容易實現，例如li:before{content:"question "}

但我的用例是一個 html 電子郵件，所以我僅限於內聯樣式。 我不能使用類和選擇器。 有解決辦法嗎？

它應該看起來像這樣，但在數字前加上“問題”：

 <ol style="max-width:7cm"> <li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;">Why is the sky blue?</li> <li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;">How many teeth an adult human has?</li> <li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;">Why do birds fly south in the winter?</li> <li style="border:2px dotted rgb(187,187,187);padding:2mm;margin-bottom:3mm;background:#D8EDFF;border-radius: 20px;">Why can I sometimes see the moon during the day?</li> </ol>

我想避免為代碼中的每個列表元素重復“問題”一詞。

Answer 1

您可以在內部元素上使用負邊距來移動前綴。 然后，您將在列表中使用匹配的正邊距。 我正在使用em元素來嘗試解釋不同的字體大小。 你應該好好測試。 也許rem單位會更好。

 <ol style="max-width:7cm; margin-left: 5.5em;"> <li style="border: 2.0px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 7.0mm;background: rgb(238,238,238);border-radius: 20px;"> <span style="margin-left: -90px; margin-right: 25px;">Question</span> Why is the sky blue? </li> <li style="border: 2.0px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 7.0mm;background: rgb(238,238,238);border-radius: 20px;"> <span style="margin-left: -5.5em; margin-right: 25px;">Question</span> How many teeth does an adult human have? </li> <li style="border: 2.0px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 7.0mm;background: rgb(238,238,238);border-radius: 20px;"> <span style="margin-left: -5.5em; margin-right: 25px;">Question</span> Why do birds fly south in the winter? </li> <li style="border: 2.0px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 7.0mm;background: rgb(238,238,238);border-radius: 20px;"> <span style="margin-left: -5.5em; margin-right: 25px;">Question</span> Why do birds fly south in the winter? </li> </ol>

Answer 2

對於像這樣跨電子郵件兼容的定制，您將不得不打破語義並使用表格。

<table style="width:100%;max-width:500px;">
    <tr>
        <td style="width:30px;vertical-align: middle" width="30"><p style="margin:0;font-size:14px;margin-bottom:25px;">Question&nbsp;1:</p>
</td>
<td style="vertical-align: top"><p style="margin:0;font-size:14px;border: 2px dotted rgb(187,187,187);padding: 10px;margin-bottom: 25px;background: rgb(238,238,238);border-radius: 20px;">Why is the sky blue?</p>
</td>
    </tr>
    <tr>
        <td style="width:30px;vertical-align: middle" width="30"><p style="margin:0;font-size:14px;margin-bottom:25px;">Question&nbsp;2:</p>
</td>
<td style="vertical-align: top"><p style="margin:0;font-size:14px;border: 2px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 25px;background: rgb(238,238,238);border-radius: 20px;">Why is the sky blue?</p>
</td>
    </tr>
    <tr>
        <td style="width:30px;vertical-align: middle" width="30"><p style="margin:0;font-size:14px;margin-bottom:25px;">Question&nbsp;3:</p>
</td>
<td style="vertical-align: top"><p style="margin:0;font-size:14px;border: 2px dotted rgb(187,187,187);padding: 2.0mm;margin-bottom: 25px;background: rgb(238,238,238);border-radius: 20px;">Why is the sky blue?</p>
</td>
    </tr>
</table>

這不會在 Outlook 中實現圓角（在 SO 或其他地方有很多已回答的問題）。

但它在 Gmail 和其他人中表現得更好（首先是這個；其次是@isherwood's）

在 Outlook Windows 中：

Answer 3

每當您設計 email 時，您都可以使用內聯 css 來完成。 這是給您的示例代碼：

<ul>
  <li>Question 1</li>
  <li>Question 2</li>
  <li>Question 3</li>
</ul>

我認為沒有必要在電子郵件中編寫偽元素。