Lista horizontal que se envuelve sin superponer

Question

Estoy intentando crear una lista (UL) que se muestra horizontalmente. Cada elemento tiene un relleno alrededor. El problema que tengo es que cuando la lista llega al final de la línea y comienza a pasar a la línea siguiente, no se procesa lo suficientemente baja y comienza a superponerse a la primera línea. ¿Alguien me puede ayudar a encontrar la manera de hacer que la envoltura pase a la siguiente línea sin superponer?

Aquí está la 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; 
} 

Aquí está el 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> 

estoy usando CSS plan si lo que importa.

Answer 1

Usted puede flotar todos los elementos li o darles display: inline-block, a continuación, darles un poco de margen superior e inferior:

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

    margin: 20px 0; 
} 

Ver: http://www.jsfiddle.net/yijiang/z8Gfe/ para un ejemplo sencillo. Y por cierto, los elementos ul no son válidos en p, párrafos