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