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

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

帶右括號的有序列表(HTML)下字母?

帶右括號的有序列表(HTML)下字母?

動漫人物 2019-11-26 14:31:20
有序列表的默認低字母列表類型使用點“?!?。有沒有辦法使用右括號代替a)... b)..etc?
查看完整描述

3 回答

?
達令說

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

這是一個整潔的解決方案。(老實說,這讓我感到驚訝。)CSS有一個叫做counters的東西,您可以在其中設置每個標題的自動章節編號。進行一些修改可以為您提供以下內容;您需要自己整理填充等。


ol {

  counter-reset: list;

}

ol > li {

  list-style: none;

}

ol > li:before {

  content: counter(list, lower-alpha) ") ";

  counter-increment: list;

}

<span>custom list style type (v1):</span>

<ol>

  <li>Number 1</li>

  <li>Number 2</li>

  <li>Number 3</li>

  <li>Number 4</li>

  <li>Number 5</li>

  <li>Number 6</li>

</ol>

適用于所有現代瀏覽器和IE9 +(可能是IE8,但可能有問題)。


更新:我添加了子選擇器,以防止嵌套列表采用父樣式。trejder在注釋中也很不錯,因為列表項的對齊方式也被弄亂了。456bereastreet上的文章提供了一個很好的解決方案,其中涉及絕對定位計數器。


ol {

    counter-reset: list;

}

ol > li {

    list-style: none;

    position: relative;

}

ol > li:before {

    counter-increment: list;

    content: counter(list, lower-alpha) ") ";

    position: absolute;

    left: -1.4em;

}

<span>custom list style type (v2):</span>

<ol>

  <li>Number 1</li>

  <li>Number 2</li>

  <li>Number 3</li>

  <li>Number 4</li>

  <li>Number 5</li>

  <li>Number 6</li>

</ol>


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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