css list inline is not listing items horizontally? [duplicate]

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>

Convulse

see css.maxdesign.com.au/listutorial/index.htm – Brufsky

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>

Freeliving

This is not right. The reason display inline did not reach the desired effect is that h1 is being displayed as a block. Float left will work alright, but the reason it is not working is not (as far as I see it) because of a lacking float left. David Thomas' answer explains the solution and the problems with several h1 in a list. – Proselytism

h1 is a block level element and takes up entire width of the parent container. – Fettling

Answer 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

Stillwell

Thank you for pointing me in the right direction. That's because the h1 element is block-level element by default. Well that led me to see the <p> tag inside my list and I was able to handle it that way, thank you. – Septavalent

For future readers: in html5 we can define sections explicitly, and each section can have an <h1> tag and be semantically correct. – Rhodium

Answer 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.

Promising

Answer 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

Danielldaniella

Answer 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.

Desmonddesmoulins