Horizontal List that wraps without overlapping

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>

You can either float all the li elements or give them display: inline-block, then give them some top and bottom margin: 

.letterlist li {
    float: left; 
       /* or */ 
    display: inline-block;

    margin: 20px 0;
}

See: http://www.jsfiddle.net/yijiang/z8Gfe/ for a simple example. And by the way, ul elements are not valid in p paragraphs

Tags:

Html

Css

Recent Posts