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;
}
精彩评论