如何将数字与有序列表中的项目样式在一起？

huangapple
go评论98阅读模式
英文:

How to style the number together with the item in an ordered list?

问题

当我为有序列表项定义一个.active类时，项目编号没有样式。

  1. li.active {
  2.   background-color: #c5ecbe;
  3.   width: 14em;
  4.   padding: 3px 6px;
  5.   border-radius: 8px;
  6. }

如何同时为项目编号设置样式？

英文:

When I define an .active class for an ordered list item, the item number is not styled.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. li.active {
  2.   background-color: #c5ecbe;
  3.   width: 14em;
  4.   padding: 3px 6px;
  5.   border-radius: 8px;
  6. }

<!-- language: lang-html -->

  1. &lt;ol&gt;
  2.   &lt;li id=&quot;i1&quot; class=&quot;active&quot;&gt;Item 1&lt;/li&gt;
  3.   &lt;li id=&quot;i2&quot;&gt;Item 2&lt;/li&gt;
  4.   &lt;li id=&quot;i3&quot;&gt;Item 3&lt;/li&gt;
  5. &lt;/ol&gt;

<!-- end snippet -->

How to style the number together with the item?

答案1

得分: 0

需要添加一些CSS和CSS计数器。

  1. ol {
  2.   list-style: none;
  3.   counter-reset: item;
  4. }
  6. li {
  7.   counter-increment: item;
  8.   margin-bottom: 5px;
  9. }
  11. li:before {
  12.   content: counter(item) ".";
  13.   width: 15px;
  14.   margin-right: 5px;
  15.   text-align: center;
  16.   display: inline-block;
  17. }
  19. li.active {
  20.   background-color: #212121;
  21.   width: 14em;
  22.   padding: 3px 6px;
  23.   border-radius: 8px;
  24. }
  1. <ol>
  2.   <li id="i1" class="active">Item 1</li>
  3.   <li id="i2">Item 2</li>
  4.   <li id="i3">Item 3</li>
  5. </ol>
英文:

Need to add some css and css counter

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. ol {
  2.   list-style: none;
  3.   counter-reset: item;
  4. }
  6. li {
  7.   counter-increment: item;
  8.   margin-bottom: 5px;
  9. }
  11. li:before {
  12.   content: counter(item) &quot;.&quot;;
  13.   width: 15px;
  14.   margin-right: 5px;
  15.   text-align: center;
  16.   display: inline-block;
  17. }
  19. li.active {
  20.   background-color: #212121;
  21.   width: 14em;
  22.   padding: 3px 6px;
  23.   border-radius: 8px;
  24. }

<!-- language: lang-html -->

  1. &lt;ol&gt;
  2.   &lt;li id=&quot;i1&quot; class=&quot;active&quot;&gt;Item 1&lt;/li&gt;
  3.   &lt;li id=&quot;i2&quot;&gt;Item 2&lt;/li&gt;
  4.   &lt;li id=&quot;i3&quot;&gt;Item 3&lt;/li&gt;
  5. &lt;/ol&gt;

<!-- end snippet -->

答案2

得分: 0

使用 list-style-position: inside

  1. li.active {
  2.   background-color: #212121;
  3.   width: 14em;
  4.   padding: 3px 6px;
  5.   border-radius: 8px;
  6. }
  8. ol {
  9.   list-style-position: inside;
  10. }
  1. <ol>
  2.   <li id="i1" class="active">Item 1</li>
  3.   <li id="i2">Item 2</li>
  4.   <li id="i3">Item 3</li>
  5. </ol>
英文:

Use list-style-position: inside

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. li.active {
  2.   background-color: #212121;
  3.   width: 14em;
  4.   padding: 3px 6px;
  5.   border-radius: 8px;
  6. }
  8. ol {
  9.   list-style-position: inside
  10. }

<!-- language: lang-html -->

  1. &lt;ol&gt;
  2.   &lt;li id=&quot;i1&quot; class=&quot;active&quot;&gt;Item 1&lt;/li&gt;
  3.   &lt;li id=&quot;i2&quot;&gt;Item 2&lt;/li&gt;
  4.   &lt;li id=&quot;i3&quot;&gt;Item 3&lt;/li&gt;
  5. &lt;/ol&gt;

<!-- end snippet -->

答案3

得分: -2

  1. li.active {
  2.   background-color: #212121;
  3.   width: 14em;
  4.   padding: 3px 6px;
  5.   border-radius: 8px;
  6.   font-size: 1.5em;
  7.   color: red;
  8. }
  1. <ol>
  2.   <li id="i1" class="active">Item 1</li>
  3.   <li id="i2">Item 2</li>
  4.   <li id="i3">Item 3</li>
  5. </ol>
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. li.active {
  2.   background-color: #212121;
  3.   width: 14em;
  4.   padding: 3px 6px;
  5.   border-radius: 8px;
  6.   font-size: 1.5em;
  7.   color: red;
  8. }

<!-- language: lang-html -->

  1. &lt;ol&gt;
  2.   &lt;li id=&quot;i1&quot; class=&quot;active&quot;&gt;Item 1&lt;/li&gt;
  3.   &lt;li id=&quot;i2&quot;&gt;Item 2&lt;/li&gt;
  4.   &lt;li id=&quot;i3&quot;&gt;Item 3&lt;/li&gt;
  5. &lt;/ol&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月19日 00:14:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/75494641.html
  • css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定