css list inline is not listing items horizontally?

Question

i dont know why this is not display right, the list is meant to display horizontally? instead its displaying vertically!

this is my code:

html file:

<ul id="stats">

        <li><h1>53</h1></a></li>
        <li><h1>67</h1></a></li>

 </ul>

css file:

#stats li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Answer 1

You forgot to add float: left property to your CSS:

#stats li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

By the way, you are missing opening a tag in your HTML example. Should be

<li><a href="#"><h1>53</h1></a></li>

Answer 2

h1 tags default as display:block; so that is taking precedence.

---

Also, you have </a> tags after closing the <h1> tags, but there are no opening tags. That could cause issues in older browsers.

---

Third, what's the purpose of putting h1 tags inside of lis? Semantically, that doesn't make sense.

Answer 3

That's because the h1 element is block-level element by default.

Add:

h1 {display: inline; }

to your css and they work as you want.

On a separate note, it's worth noting that there should be only one h1 per page, all other headings, semantically, are below that heading and are sub-headings, of a sort. Think of it as a book, the book-title would be the h1, the chapters the h2 and so on.

I'd suggest, then, changing your html a little:

<ul id="stats">
    <li><a href="#"><span class="listHeader">53</span></a></li>
    <li><a href="#"><span class="listHeader">67</span></a></li>
</ul>

But that might, possibly, be just me =)

Here's an article to support my point of view:

• Grok Web-Standards