亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在HTML中編號嵌套的有序列表

在HTML中編號嵌套的有序列表

梵蒂岡之花 2019-11-26 15:17:39
我有一個嵌套的有序列表。<ol>  <li>first</li>  <li>second  <ol>    <li>second nested first element</li>    <li>second nested secondelement</li>    <li>second nested thirdelement</li>  </ol>  </li>  <li>third</li>  <li>fourth</li></ol>當前,嵌套元素再次從1開始返回,例如第一第二第二個嵌套的第一個元素第二個嵌套的第二個元素第二個嵌套的第三個元素第三第四我想要的是第二個元素的編號,如下所示:第一第二2.1。第二個嵌套的第一個元素2.2。第二個嵌套的第二個元素2.3。第二個嵌套的第三個元素第三第四有辦法嗎?
查看完整描述

3 回答

?
30秒到達戰場

TA貢獻1828條經驗 獲得超6個贊

我知道現在答復太晚了,但是我只是找到了一個使用CSS進行操作的示例。將此添加到您的CSS部分(或文件):


ol.nested

{

    counter-reset: item

}

li.nested

{

    display: block

}

li.nested:before

{

    content: counters(item, ".") ". ";

    counter-increment: item

}

這是您的列表代碼的示例:


<ol class="nested">

<li class="nested">item 1</li>

<li class="nested">item 2

    <ol class="nested">

        <li class="nested">subitem 1</li>

        <li class="nested">subitem 2</li>

    </ol></li>

<li class="nested">item 3</li>

</ol>

高溫超導


查看完整回答
反對 回復 2019-11-26
?
明月笑刀無情

TA貢獻1828條經驗 獲得超4個贊

此頁面上的解決方案均不能在所有級別和長(包裝)段落中正確且普遍地使用。由于標記的大小可變(1,。,1.2、1.10、1.10.5等),要獲得一致的縮進確實很棘手;它不能只是“偽造”的,甚至不能為每個可能的壓痕級別使用預先計算的邊距/填充。




我終于想通了,解決實際工作,不需要任何JavaScript。


已在Firefox 32,Chromium 37,IE 9和Android瀏覽器上進行了測試。在IE 7及更高版本上不起作用。


CSS:


ol {

  list-style-type: none;

  counter-reset: item;

  margin: 0;

  padding: 0;

}


ol > li {

  display: table;

  counter-increment: item;

  margin-bottom: 0.6em;

}


ol > li:before {

  content: counters(item, ".") ". ";

  display: table-cell;

  padding-right: 0.6em;    

}


li ol > li {

  margin: 0;

}


li ol > li:before {

  content: counters(item, ".") " ";

}


查看完整回答
反對 回復 2019-11-26
  • 3 回答
  • 0 關注
  • 1369 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號