有序列表中的編號在其單獨的行中？

Question

我怎樣才能將號碼放在單獨的行上？ 我需要這個，因為我想將 HTML 導出到 EPUB 並且屏幕空間有限，特別是當我有四位數字時它占用了行上的水平空間。

所有的項目都是英語短語及其ph.netic 轉錄。 所以我在每個列表項中有兩個段落，一個是短語本身，另一個段落是 ph.netic 轉錄。

<ol>
  <li>
     <p>Phrase</p>
     <p>Phonetic transcription</p>
  </li>

  <li>
     <p>Phrase</p>
     <p>Phonetic transcription</p>
  </li>
</ol>

我想知道是否可以將數字放在一個框中，例如在其上指定四個邊框1px solid #000; 讓它看起來更時尚一點。

我認為更簡單的方法是不使用有序列表，但在那種情況下我需要手動插入數字，以防一兩個短語被刪除更新數字將是地獄。 所以，在我的例子中，無序列表會更好。 正確的？

如果有任何幫助，我將不勝感激。

Answer 1

使用計數器你不必手動插入數字，這里是代碼：

<ul>
    <li>
        <p>Phrase</p>
        <p>Phonetic transcription</p>
    </li>
    <li>
        <p>Phrase</p>
        <p>Phonetic transcription</p>
    </li>
</ul>

ul {
    counter-reset: item;
    list-style-type: none;
}

li::before {
    content: counter(item);
    counter-increment: item;
    border: 1px solid black;
}

編輯：計數器在 EPUB 中不起作用。 你必須手動寫數字：

<ul>
    <li>
        <span class="number">1</span>
        <p>Phrase</p>
        <p>Phonetic transcription</p>
    </li>
    <li>
        <span class="number">2</span>
        <p>Phrase</p>
        <p>Phonetic transcription</p>
    </li>
</ul>

ul {
    list-style-type: none;
}

.number {
    border: 1px solid black;
}