HTML命令自定義文本列表

-3

<ol> 
    <li>foo</li> 
    <li>bar</li> 
    <li>testing</li> 
    <li>hello world</li> 
</ol>

這當然，作品並給出了下面的輸出：

1. foo 
2. bar 
3. testing 
4. hello world

現在我的問題是，我有時需要有不同的文字而不是數字。文本應該完全可定製，所以CSS :before解決方案不適合我。

考慮這個例子，電視劇情節的列表：

12. The Duel 
    13. Prince Family Paper 
14./15. Stress relief 
    16. Lecture Circuit: Part 1

所以基本上我想創造一個「假」 <ol>使數字之後的所有文字正確對齊。有什麼辦法可以在HTML/CSS中實現這一點嗎？

來源

2017-02-14 HackerCow

@AymDev我的問題是從字面上如何做到這一點我自己，因爲我不知道怎麼辦。請注意，我也必須在項目符號點之間顯示文本，並且此文本也需要排列。我不認爲這是一項微不足道的任務，我想請求下決心解釋他們爲什麼這樣做。 – HackerCow

@AymDev這不符合我的要求（請參閱https://jsfiddle.net/j0shey6f/）。文字未正確對齊 – HackerCow

對不起，但您所說的話沒有任何意義。我遇到了一個不平凡的問題，經過大量研究後，決定提出一個問題。我的印象是，這正是Stackoverflow的目的。我非常瞭解HTML和CSS中的基本和高級技術，但我無法自己找到適合自己需求的解決方案。看來，即使Stackoverflow據說目前沒有回答這個問題（請記住，我試圖展示的文本是動態的），我認爲它甚至可以以這樣或那樣的方式讓社區受益。 – HackerCow

我認爲你必須用無邊界的表格解決它。將第一個tds對齊到右側，第二個到左側。是我認爲最接近你想要的。

喜歡的東西：

CSS：

table { 
    border: none; 
} 
table tr td:first-child { 
    text-align: right; 
}

HTML：

<table> 
<tr> 
    <td>12.</td> 
    <td>The Duel</td> 
</tr> 
<tr> 
    <td>13. 
    <td>Prince Family Paper 
</tr> 
<tr> 
    <td>14./15.</td> 
    <td>Stress relief</td> 
</tr> 
<tr> 
    <td>16.</td> 
    <td>Lecture Circuit: Part 1</td> 
</tr> 
</table>

來源

2017-02-14 13:36:07

謝謝，這工作就像一個魅力！我對使用表格解決方案有點猶豫，但只要它能夠工作，我就可以很好地使用表格解決方案。儘管如此，我仍然認爲沒有必要進行3次降價。 – HackerCow

好吧，我沒有倒下。是的，我也喜歡避開桌子，但有時他們是我們最好的朋友。 XP –

HTML命令自定義文本列表

回答

相關問題