は、私はそれが遠征ルートのためにあるように、私はそれをしたい私は</p> <ol> <li>content1</li> <li>content2</li> <li>content3</li> </ol> <p>のような順序付きリストを持っている

Question

ナンバリング私のリストにテキストを追加することができます次のようになります。

1日目：コンテンツ1

2日目：content2

3日目：content3

は、私はもちろん、テキストとしてそれを書き留めことができますが、私はそれをリストとして持つ好みます。 これは可能ですか？

Answer 1

- リストをリセットし、残りを行うにpseudoの要素をさせる：

1. 使用今list-style-type:noneとpadding:0

2. を使用して、リストのスタイルをリセットインクリメンタルcounter必要なリスト番号を取得する

デモ下記を参照してください：あなたはコードを試している

ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    counter-reset: list; 
 
} 
 
ul li:before { 
 
    content: 'Day ' counter(list) ' : '; 
 
    counter-increment: list; 
 
}

<ul> 
 
    <li>content1</li> 
 
    <li>content2</li> 
 
    <li>content3</li> 
 
</ul>

Answer 2

ol { 
 
    position:relative; 
 
    padding-left: 50px; 
 
} 
 
ol li:before { 
 
    content:"Day"; 
 
    position:absolute; 
 
    left:0; 
 
}

<ol> 
 
    <li>content1</li> 
 
    <li>content2</li> 
 
    <li>content3</li> 
 
</ol>

チェックこの

Answer 3

var routes = {} 

//add to a list 
routes.Day1 = 'Going Here!'; 
routes.Day2 = 'Resting'; 
//and keep adding so on 

//to print/list the routes 
console.log(routes); 

//give it the tag and data 
function add2html(tag, data) { 
    var element = document.getElementById(tag); 
    element.replaceWith(data); 
}; 

// to add to day1 
add2html('day1', routes.Day1) 

ないあなたはJavaScriptに不履行ので、使用しているものを確認してください。 次にhtml。

<!-- using <li></li> will give you numbers before --> 
<ul id="day1"></ul> 

Answer 4

これは、順序付けられていないリストとして定義することで実現できます。 次に、css define ul list-styleでnoneを指定します。 それから、すべてのliには、次のようにcssを使用してください。 li：1日目のコンテンツを持つnth-of-type（1）セレクタ：1日目：、li：2日目のコンテンツを持つnth-of-type（2）セレクタ。あなたはリスト項目を配置することなく、それをを行うことができます