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


.item-num{
   display:inline-block;
   width:30px; /* make it whatever u want */
   text-align:right;
}

      



this should fix it

+3


source


You may try



.item {
 float:right;
}

      

+3


source


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







All Articles