Align list numbers in
I have below HTML. here i am trying to align the numbers in a list that will be right aligned, but in my output at the moment they are aligned to the left (through some forums i found out that the nukbers list is left aligned by default)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<ul class="itemizedlist">
<li class="item">
<div class="para"><span class=item-num>(i)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(ii)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(iii)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(iv)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(v)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(vi)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(vii)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(viii)</span> Item desc</div>
</li>
</ul>
</body>
</html>
in the current output I am getting the following result.
(i) Item desc (ii) Item desc (iii) Item desc (iv) Item desc (v) Item desc (vi) Item desc (vii) Item desc (viii) Item desc
but i want an output like below.
(i) Item desc (ii) Item desc (iii) Item desc (iv) Item desc (v) Item desc (vi) Item desc (vii) Item desc (viii) Item desc
please let me know how I can do this.
here is the fiddle , also i added my CSS there.
thank
+3
source to share
3 answers
I think this is what you need: check below Fiddle
JSFiddle
CSS
ul.itemizedlist {
list-style-type: none;
margin-left: 0.1em;
}
ul.itemizedlist li.item {
list-style: none;
}
.item{
width:100px;
text-align:right;
}
.itemizedlist li.item div.para span.item-num {
margin-left: -0.5em;
text-indent: 0em;
margin-right: 0em;
}
+1
source to share