'Horizontal List that wraps without overlapping

I'm trying to create a list (UL) which is displayed horizontally. Each item has some padding around it. The problem I'm having is that when the list gets to the end of the line and starts wrapping to the next line, it doesn't render low enough and starts overlapping the first line. Can someone help me figure out how to get the wrapping to go on to the next line without overlapping?

Here's the CSS

.letterlist ul {
   margin: 0; padding: 0; 
    list-style-type: none; list-style-image: none;
}

.letterlist li 
{
    display:inline;
}

.letterlist li a
{
    margin: 4px;
    color:#eee;
    padding: 10px 20px;
    background:#3c66ad;
    font-size:16px;
    font-weight: bold;
    border-radius: 5px;
}

Here's the HTML

<p>
<ul class="letterlist">
    <li><a href="/list/A">A</a></li>
    <li><a href="/list/B">B</a></li>
    <li><a href="/list/C">C</a></li>
    <li><a href="/list/D">D</a></li>
    <li><a href="/list/E">E</a></li>
    <li><a href="/list/F">F</a></li>
    <li><a href="/list/G">G</a></li>
    <li><a href="/list/H">H</a></li>
    <li><a href="/list/I">I</a></li>
    <li><a href="/list/J">J</a></li>
    <li><a href="/list/K">K</a></li>
    <li><a href="/list/L">L</a></li>
    <li><a href="/list/M">M</a></li>
    <li><a href="/list/N">N</a></li>
    <li><a href="/list/O">O</a></li>
    <li><a href="/list/P">P</a></li>
    <li><a href="/list/Q">Q</a></li>
    <li><a href="/list/R">R</a></li>
    <li><a href="/list/S">S</a></li>
    <li><a href="/list/T">T</a></li>
    <li><a href="/list/U">U</a></li>
    <li><a href="/list/V">V</a></li>
    <li><a href="/list/W">W</a></li>
    <li><a href="/list/X">X</a></li>
    <li><a href="/list/Y">Y</a></li>
    <li><a href="/list/Z">Z</a></li>
</ul>
</p>

I'm using blueprint CSS if that matters.

htmlcss


Solution 1:[1]

Yi Jiang's answer can be simplified by using a flex box

.letterlist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.letterlist a {
    margin-bottom: 10px;
    color:#eee;
    padding: 10px 20px;
    background:#3c66ad;
    font-size:16px;
    font-weight: bold;
    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
<div class="letterlist">
    <a href="/list/A">A</a>
    <a href="/list/B">B</a>
    <a href="/list/C">C</a>
    <a href="/list/D">D</a>
    <a href="/list/E">E</a>
    <a href="/list/F">F</a>
    <a href="/list/G">G</a>
    <a href="/list/H">H</a>
    <a href="/list/I">I</a>
    <a href="/list/J">J</a>
    <a href="/list/K">K</a>
    <a href="/list/L">L</a>
    <a href="/list/M">M</a>
    <a href="/list/N">N</a>
    <a href="/list/O">O</a>
    <a href="/list/P">P</a>
    <a href="/list/Q">Q</a>
    <a href="/list/R">R</a>
    <a href="/list/S">S</a>
    <a href="/list/T">T</a>
    <a href="/list/U">U</a>
    <a href="/list/V">V</a>
    <a href="/list/W">W</a>
    <a href="/list/X">X</a>
    <a href="/list/Y">Y</a>
    <a href="/list/Z">Z</a>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions