Giacomo Lawrance Giacomo Lawrance - 21 days ago 7
CSS Question

Making a vertical header horizontal

I'm looking to make the following horizontal, along the page, instead of vertical. I'd like to do this as it is meant to be a header along the top of the site.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</header>
</html>

Answer

Problems with you code:

  • The <header> element is wrong, should be <head>.
  • There's no <html> tag.
  • The </header> is orphaned.
  • There's no end tags for </body> and </head>.

Just do the two things:

  • Remove the width for the <ul>.
  • Add display: inline-block for the <li>.

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: #f1f1f1;
      }

      ul li {
        display: inline-block;
      }

      li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
      }

      /* Change the link color on hover */
      li a:hover {
        background-color: #555;
        color: white;
      }
    </style>
  </head>
  <body>

    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </body>
</html>
Comments