CODEWITHSUNDEEP
htmlcss
ajma
ajma

Reputation: 12206

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.

Upvotes: 21

Views: 20342

Answers (2)

Sean
Sean

Reputation: 480

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>

Upvotes: 7

Yi Jiang
Yi Jiang

Reputation: 50095

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

Upvotes: 28

Related Questions