List: Inline

HTML lists can be styled in many different ways with CSS. A popular way, is to style a list to display inline, or horizontally:

HTML file: Displayed by browser:
<style>
ul#menu li {
    display:inline;
}
</style>
<body>

<h2>Horizontal List</h2>
<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

</body>

Horizontal List

It doesn't look good nor very useful right now, but this really can be a great thing, as you'll see on the next page!

Back button Table of Contents Next button