CODEWITHSUNDEEP
htmlcss
user4054755
user4054755

Reputation: 21

List item align not working properly

I have a ul with some li and I want the result to be like this:

  I. List element 1
 II. List element 2
III. List element 3
 IV. List element 4
  V. List element 5

but I get this result:

I. List element 1
II. List element 2
III. List element 3
IV. List element 4
V. List element 5

here is my code: link

Upvotes: 0

Views: 93

Answers (5)

muhammad tayyab
muhammad tayyab

Reputation: 812

Just change all ul tags to ol and remove tags.

You need to add type with ol like that:

<ol Type="I">

There are following types you can use with ordered list:

Type="i"
Type="a"
Type="A"

Upvotes: 1

Shai
Shai

Reputation: 7317

Method 1

Change the <ul>...</ul> to <ol type="I">...</ol> – ol is an ordered list, I means uppercase roman numerals, already formatted exactly how you need them.

Method 2

Change the <ul>...</ul> to <ol>...</ol>, but specify the uppercase roman numerals in CSS instead of HTML:

ol {
    list-style-type: upper-roman;
}

Method 3

Methods 1 and 2 are best – as you can see they save a lot of messing around with custom spans, and <ul> is supposed to only be used for lists where the order is irrelevant. If you really need to use <ul> like in your question, then add display: inline-block; to your spans (you can't give them a width otherwise), and add list-style-type: none to the ul and lis, to hide the bullet points (you might want to remove the li left margins too).

All 3 methods can be seen working in this JSFiddle.

Upvotes: 2

khollenbeck
khollenbeck

Reputation: 16157

No need for the span tags. You can do this..

<ol type="I">
   <li>Item desc</li>
   <li>Item desc</li>
   <li>Item desc</li>
   <li>Item desc</li>
   <li>Item desc</li>
</ol>

DEMO:

http://jsfiddle.net/1L0wdggL/1/

-or

 <ol>
    <li> Item desc</li>
    <li> Item desc</li>
    <li> Item desc</li>
    <li>Item desc</li>
    <li> Item desc</li>
</ol>

li {
    list-style-type: upper-roman;
}

Demo:

http://jsfiddle.net/1L0wdggL/2/

Upvotes: 2

Giannis Grivas
Giannis Grivas

Reputation: 3412

Add this CSS 

li {
display:flex;
}

Upvotes: 2

Florin Pop
Florin Pop

Reputation: 5135

You should use this:

span{
   display:inline-block;
   width:30px;
   text-align:right;
}

Upvotes: 2

Related Questions