开发者

Make `(1)` in list style

开发者 https://www.devze.com 2023-02-22 15:05 出处:网络
I want to make the following using list in HTML The following are the properties: (1) blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah

I want to make the following using list in HTML

The following are the properties:
  (1) blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
      blahblahblahblah
  (2) blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
      blahblahblahblah

If I use list-style-type as decimal, I will get like

The following are the properties:
  1. blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
     blahblahblahblah
  2. blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
     blahblahblahblah

Can I achieve the former using list or by any other means?

Edit:

On using Boltclock's answer to How to set the li style?? I used:

ol.d {
    counter-reset: item;
}

ol.d li:before {
    content: '(' counter(item) ') ';
    counter-increment: item;
}

&l开发者_运维技巧t;ol class="d">
  <li>blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
      blahblahblahblah</li>
  <li>blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
      blahblahblahblah</li>
</ol>

I get the result like this:

The following are the properties:
  (1) blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
  blahblahblahblah
  (2) blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
  blahblahblahblah

Now I'd like to indent the second line also. How can I achieve this?


I came up with a workaround using floats, but it's extremely fragile and relies on the actual number of list items you will have. The more digits of numbers, the more you need to increase your margins to account for it. Not to mention it depends on what font you use too.

ol.d {
    counter-reset: item;
}

ol.d li {
    float: left;
    margin-left: 1.5em;
}

ol.d li:before {
    clear: both;
    float: left;
    margin-left: -1.5em;
    content: '(' counter(item) ') ';
    counter-increment: item;
}

Be sure to clear the floats with whatever element follows your ol.

jsFiddle preview


Use below css for (1) style in ol listing


ol {
counter-reset: item;
list-style-type: none;
}

ol li{position: relative;}

ol li:before {
position: absolute;  
   margin: 0px 0 0 -25px;    
   vertical-align: middle;
   display: inline-block;
   content: '(' counter(item, decimal) ' ) ';
   counter-increment: item;
}
0

精彩评论

暂无评论...
验证码 换一张
取 消