How to Create a Truly Horizontal List in CSS?

Creating Horizontal List Items

When attempting to create a horizontal list, one may encounter issues where the list items do not align horizontally. To rectify this problem, here's a simplified solution:

The issue:

ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}

Using display: inline and the auto margins does not produce the desired outcome.

The solution:

ul > li {
    display: inline-block;
}

By employing display: inline-block to the list items, they will behave as individual blocks within the horizontal flow. This ensures that each item wraps its content and aligns itself horizontally.

Here's an updated code snippet:

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline-block;
  margin: 0;
  top: 0px;
  height: 50px;
}
ul#menuItems li a {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: bolder;
  color: #000;
  height: 50px;
  width: auto;
  display: block;
  text-align: center;
  line-height: 50px;
}

The above is the detailed content of How to Create a Truly Horizontal List in CSS?. For more information, please follow other related articles on the PHP Chinese website!