FedAirZing
New Member
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\[code\].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;}\[/code\]Here's the HTML\[code\]<p><ul class="letterlist"> <li><a href="http://stackoverflow.com/list/A">A</a></li> <li><a href="http://stackoverflow.com/list/B">B</a></li> <li><a href="http://stackoverflow.com/list/C">C</a></li> <li><a href="http://stackoverflow.com/list/D">D</a></li> <li><a href="http://stackoverflow.com/list/E">E</a></li> <li><a href="http://stackoverflow.com/list/F">F</a></li> <li><a href="http://stackoverflow.com/list/G">G</a></li> <li><a href="http://stackoverflow.com/list/H">H</a></li> <li><a href="http://stackoverflow.com/list/I">I</a></li> <li><a href="http://stackoverflow.com/list/J">J</a></li> <li><a href="http://stackoverflow.com/list/K">K</a></li> <li><a href="http://stackoverflow.com/list/L">L</a></li> <li><a href="http://stackoverflow.com/list/M">M</a></li> <li><a href="http://stackoverflow.com/list/N">N</a></li> <li><a href="http://stackoverflow.com/list/O">O</a></li> <li><a href="http://stackoverflow.com/list/P">P</a></li> <li><a href="http://stackoverflow.com/list/Q">Q</a></li> <li><a href="http://stackoverflow.com/list/R">R</a></li> <li><a href="http://stackoverflow.com/list/S">S</a></li> <li><a href="http://stackoverflow.com/list/T">T</a></li> <li><a href="http://stackoverflow.com/list/U">U</a></li> <li><a href="http://stackoverflow.com/list/V">V</a></li> <li><a href="http://stackoverflow.com/list/W">W</a></li> <li><a href="http://stackoverflow.com/list/X">X</a></li> <li><a href="http://stackoverflow.com/list/Y">Y</a></li> <li><a href="http://stackoverflow.com/list/Z">Z</a></li></ul></p>\[/code\]I'm using blueprint CSS if that matters.