How To Align an HTML List Side by Side

How To Align an HTML List Side by Side

This article demonstrates how to align an HTML list side by side using CSS properties. Included in this example are code snippets and a demo.

This article was first seen on and republished from csstutorial.io

HTML List Side by Side
HTML List Side by Side

HTML

Naturally, an HTML unordered list will display its list item elements vertically like in this image:

HTML Vertical Unordered List
HTML Vertical Unordered List

In this example, we want to change the HTML list direction from vertical to horizontal. To demonstrate, down below we have an HTML code snippet that contains an HTML unordered list element and list item elements. The unordered list element is wrapped in a DIV element with a class called “.container”. We will be using CSS properties to change the direction of the unordered list and to remove the list item bullets.

<div class="container">
  <ul>
    <li>List Item One</li>
    <li>List Item Two</li>
    <li>List Item Three</li>
  </ul>
</div>

CSS

To change the direction of the list, we target the unordered list element using the “ul” CSS selector.

ul {
  /* CSS Properties Here */
}

Next, we add the CSS list-style property and set the value to none. This effectivity removes the bullets on the list items.

ul {
  list-style: none;
}

Secondly, we will now target the list items within the unordered list. To do so, we use the CSS selector “ul li”, which selects list items that are only children of the ul element.

ul li {
  /* CSS Properties Here */ 
}

To force the li elements to be horizontal, we use the CSS float property. The float property is a positioning and formatting rule for the layout of content. We set the value of the float property to “left”, which floats all the li elements next to each other.

ul li {
  float: left;
}

Additionally, a unique feature of this project is the background gradient. We used a CSS background radial gradient for both the body of the document and the container that wraps the unordered list. The position of the circular gradient is set by using the value “circle at 17% 98%”.

Here are all the CSS styles used in this example to create the full project.

html,
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  background: radial-gradient(circle at 17% 98%, #29061f, #4b2020);
  color: white;
  font-family: Roboto, arial, sans-serif;
}

ul {
  list-style: none;
  background: #fff;
  padding: 20px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 50%);
  background: radial-gradient(circle at 17% 98%, #90166c, #ec6969);
  font-size: 20px;
}

ul li {
  float: left;
  margin: 10px;
}

.container {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 100%;
}

To tinker with this example, here is a link to the live demo hosted on codepen.io.

Recommended Articles