17

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>
Tha'er AlAjlouni ثائر العجلوني
  • 14,069
  • 7
  • 33
  • 38
getaway
  • 8,792
  • 22
  • 64
  • 94

5 Answers5

37

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:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • 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 `

    ` tag inside my list and I was able to handle it that way, thank you.

     – Termato Apr 12 '15 at 19:25
  • 1
    For future readers: in html5 we can define sections explicitly, and each section can have an

    tag and be semantically correct.

     –  Oct 29 '16 at 22:38
22

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>
Ventus
  • 2,482
  • 4
  • 35
  • 41
  • 12
    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. – ndvo Nov 16 '13 at 14:03
  • 3
    h1 is a block level element and takes up entire width of the parent container. – Rikin Nov 10 '16 at 16:33
4

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.

Jeff Rupert
  • 4,690
  • 2
  • 20
  • 17
2

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

sternAndy
  • 505
  • 4
  • 6
1

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.

B T
  • 57,525
  • 34
  • 189
  • 207