How to Style Lists in CSS

Use CSS list styling when default bullets, spacing, or numbering do not match your layout. This is the best way to make navigation menus, feature lists, pricing details, and article content feel polished.

What you’ll build or solve

You’ll learn how to style lists in CSS by changing markers, spacing, and layout behavior. You’ll also know how to make lists work well for menus and content blocks.

When this approach works best

This approach is the right choice when the default browser bullets or spacing feel out of place.

Common real-world scenarios include:

• Navigation menus
• Feature lists
• Pricing page benefits
• Footer link groups
• Blog content lists

This is a bad idea when the default list style already fits the content and the design system.

Prerequisites

You only need:

• A basic HTML list
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Adjust markers, spacing, and layout

Start by changing the marker style and spacing on the list container.

<ul class="features">
  <li>USA rollout</li>
  <li>UK support</li>
  <li>France pricing</li>
</ul>

<style>
  .features {
    list-style-type: square;
    padding-left: 24px;
    margin: 0;
  }
</style>

For menu-style lists, remove markers and reset spacing.

<ul class="nav-menu">
  <li>Home</li>
  <li>Pricing</li>
  <li>Docs</li>
</ul>

<style>
  .nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
</style>

What to look for:

• list-style-type changes bullets or numbers
• list-style: none removes markers completely
• Reset padding and margin for cleaner alignment
• Use list items as menu rows or horizontal links
• Keep spacing consistent across repeated lists

Examples you can copy

Feature list

<ul class="benefits">
  <li>USA cloud hosting</li>
  <li>UK customer support</li>
</ul>

<style>
  .benefits {
    list-style-type: circle;
    padding-left: 20px;
  }
</style>

Footer links

<ul class="footer-links">
  <li>About</li>
  <li>Pricing</li>
</ul>

<style>
  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }
</style>

Horizontal nav

<ul class="nav">
  <li>USA</li>
  <li>UK</li>
  <li>France</li>
</ul>

<style>
  .nav {
    list-style: none;
    display: flex;
    gap: 16px;
    padding: 0;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Removing bullets but keeping default padding

What the reader might do:

.nav {
  list-style: none;
}

Why it breaks: the left indentation may still remain.

Corrected approach:

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

Mistake 2: Styling only the li instead of the list container

What the reader might do:

li {
  list-style: none;
}

Why it breaks: marker behavior is usually best controlled on the parent list.

Corrected approach:

ul {
  list-style: none;
}

Mistake 3: Using menu styling on content lists

What the reader might do:

.article-list {
  list-style: none;
  padding: 0;
}

Why it breaks: content lists may lose readability when bullets disappear.

Corrected approach:

Keep visible markers for article or feature lists unless the design clearly replaces them.

Troubleshooting

If bullets disappear unexpectedly, check whether list-style: none is inherited from a shared class.

If indentation remains, reset padding-left and margin.

If horizontal menus wrap awkwardly, add gap and responsive spacing rules.

If content lists become hard to scan, restore markers with list-style-type.

Quick recap

• Use list-style-type to change bullets or numbers
• Use list-style: none for menus
• Reset padding and margin when removing markers
• Use Flexbox for horizontal navigation lists
• Keep content lists easy to scan