I have been trying to figure out how to put space in between a numbered list and the text and still have the text wrap nicely under the line above it. I found some script on Stack Overflow that works but for some reason I can only get bullets, no numeric's.
Thanks.
ul { margin: 0; padding: 50; } /* The wider the #list_wrapper is, the more columns will fit in it */ #list_wrapper { width: 1000px } /* The wider this li is, the fewer columns there will be */ ul.multiple_columns li { text-align: right; float: right; list-style: decimal; height: 30px; width: 400px; }
<form id="form1" runat="server"> <div> <div id="list_wrapper"> <ul class="column-count: 2;"> <li>One: If I knew how to spell the ABC's I would write and write and write and write and write and write and write some more and write and write and write and write and write and write and write.</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> </ul> </div> </div> </form>
Change anything ul
(unordered list) to ol
(ordered list).
CSS becomes:
ol{
margi... }
ol.multiple_columns li{
text-align: right;
float: ri... }
HTML becomes:
<ol class="column-count: 2;">
<li>One: If I knew ...</li>
<li>Two</li>
...
</ol>
In order to make the list numbers bold, but not the text, you would change the ol
class in your CSS to include font-weight:900;
:
ol {
margin: 0;
padding: 50;
font-weight: 900;
}
Then wrap the text of your <li>
to include <span style="font-weight:normal;"></span>
, like so:
<li><span style="font-weight:normal;">One: If I knew how to spell ... </span></li>
Without the span returning the text to a normal weight, the number and text will both be bold. BTW, font-weight
ranges from 100-900. 900
is the heaviest weight available.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.