Forums

jitendra

Are there a way to display via CSS a horizontal ordered list without miss the order numbers?

<ol>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ol>

I need to show like this :
1. Link 2. Link 3. Link 4. Link

Remember i need this on IE6 too.

rebelbwb

To the best of my knowledge you would style in much the same way you do with typical horizontal ul menus/navs

Instead of using

list-style-type: none

You would use the following for styling:


#nav li {
display: inline;
list-style-type: decimal;
padding-right: 10px;
}

Your markup would read something like this:


<ol id=\"nav\">
<li>link</li>
<li>link</li>
<li>link</li>
</ol>

Hope that helps

jitendra

No it's not working .Numbering not showing in any browser.

ikthius

"jitendra" said:
No it's not working .Numbering not showing in any browser.

did you find anything on google?

all the code I tried could not get what you wanted.

unless you write in the numbers yourself

TheDoc

Didn't have time to figure out why not having a "width" makes it break a bit, but here ya go:

<html>
<head>
<style type=\"text/css\">
#decimal {list-style-type: decimal}
#decimal li {float:left; width:75px; padding:0;}
</style>
</head>

<body>
<ol id=\"decimal\">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</html>

I'll give it another look when I get home.

iopet

Give it a margin, e.g. using TheDoc's example:

<style type=\"text/css\">
	* {margin:0;padding: 0;}
	#decimal li {float:left;	margin: 0 10px 0 30px;}
</style>

<ol id=\"decimal\">
	<li>Coffee</li>
	<li>Tea</li>
	<li>Coca Cola</li>
</ol>

jitendra

ZIt's workinf in firefox but not in IE

treehouse : what would you like to learn today?

Forums

Are there a way to display OL with numbers horizontally?