css list inline is not listing items horizontally?

Question

I don't know why this is not displayed right, the list is meant to display horizontally? Instead it is displaying vertically!

this is my code:

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

<ul id="stats">
  <li>
    <h1>53</h1>
    </a>
  </li>
  <li>
    <h1>67</h1>
    </a>
  </li>
</ul>

Solution 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>

Solution 2

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

Solution 3

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.

Solution 4

There are multiple solutions: you could change li to display: inline-block; or h1 to display:inline; (keep in mind to use only one h1 per site and to use it semantically correct! If you just want to style a word or a sentence which isn't really a h2 or 3 then use span's, em's or strong's.

Also it's important that an inline-a-Tag can't enclose a block-whatever-Tag that is if you're not developing for HTML5 where you can enclose just anything in an a-Tag.

Also if you can, omit floating for a thing that can be achieved with more backwards compatibilty

Solution 5

Using display: inline-block as sternAndy suggests is probably the right solution here. Inline isn't really useful for anything but elements that have no nested elements inside them.

View more solutions