DEV Community

Cover image for How to make horizontal list in HTML using CSS
collegewap
collegewap

Posted on Originally published at codingdeft.com

How to make horizontal list in HTML using CSS

#css #html #webdev

Have you started hacking with CSS recently and wanted to display a list or menu in a horizontal fashion? Then you are at the right place. In this article, we will explore different ways to display a horizontal list in HTML.

Project setup

Below will be the HTML code we will be using throughout this article:



<!DOCTYPE html>
<html>
  <head>
    <title>Horizontal List</title>
    <style></style>
  </head>
  <body>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The above HTML will render the page as shown below:

basic setup

Using display inline 



<!DOCTYPE html>
<html>
  <head>
    <title>Horizontal List</title>
    <style>
      li {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

If you add display:inline-block style as shown below, the items will be aligned next to each other:

display inline

Let's add some styling to the menu:



<!DOCTYPE html>
<html>
  <head>
    <title>Horizontal List</title>
    <style>
      li {
        display: inline-block;
        padding: 1rem;
      }
      li a {
        color: white;
        text-decoration: none;
      }
      li a:hover {
        color: #333;
      }
      ul {
        background: teal;
        margin: 0;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

If you run the code now, you will get:

display inline decorated

Using display flex

We can make the ul element flex to align the menu horizontally:



<!DOCTYPE html>
<html>
  <head>
    <title>Horizontal List</title>
    <style>
      ul {
        display: flex;
      }
      li {
        list-style-type: none;
        padding: 1rem;
      }
      li a {
        color: white;
        text-decoration: none;
      }
      li a:hover {
        color: #333;
      }
      ul {
        background: teal;
        margin: 0;
        text-align: center;
        padding-left: 0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Using grid

You can use the CSS grid as shown below to align the items horizontally:



<!DOCTYPE html>
<html>
  <head>
    <title>Horizontal List</title>
    <style>
      ul {
        display: grid;
        grid-template-columns: auto auto auto auto;
      }
      li {
        list-style-type: none;
        padding: 1rem;
      }
      li a {
        color: white;
        text-decoration: none;
      }
      li a:hover {
        color: #333;
      }
      ul {
        background: teal;
        margin: 0;
        text-align: center;
        padding-left: 0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)