Make `(1)` in list style
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;
}
加载中,请稍侯......
精彩评论