如何在電子郵件中為有序串列項編號添加前綴？-有解無憂

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

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>

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

uj5u.com熱心網友回復：

您可以在內部元素上使用負邊距來移動前綴。然后，您將在串列中使用匹配的正邊距。我正在使用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>

uj5u.com熱心網友回復：

每當您設計電子郵件時，都可以使用行內 css 來完成。這是給您的示例代碼：

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410094.html

標籤：

上一篇：如何簡化這個onclick函式代碼？

下一篇：如何在if條件下禁用按鈕