CODEWITHSUNDEEP
htmlcss
user3872094
user3872094

Reputation: 3351

align the list numbers in

I've the below HTML. here i'm trying to align the numbers in the list to be aligned towards right, but in my output as of now, they are aligned left(going through some forums i came to know that the list nukbers are by default left aligned)

<!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 get the below 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 the 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 can i get this done.

here is the fiddle, also i've attached my CSS there.

Thanks

Upvotes: 3

Views: 120

Answers (3)

Butani Vijay
Butani Vijay

Reputation: 4239

I think This is what you want: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;
    }

Upvotes: 1

Gho
Gho

Reputation: 568

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

this should fix it

Upvotes: 3

Florin Pop
Florin Pop

Reputation: 5135

You can try 

.item {
 float:right;
}

Upvotes: 3

Related Questions