version imprimable de la liste flottante

Question

J'ai une liste d'extensions de téléphone que je veux imprimer une version amicale de celui-ci.

J'ai une impression css pour imprimer correctement sur du papier, les extensions sont situées dans une liste non ordonnée, qui sont flottantes vers la gauche.

<ul> 
    <li>Larry Hughes <span class="ext">8291</span></li> 
    <li>Chuck Davis <span class="ext">3141</span></li> 
    <li>Kevin Skillis <span class="ext">5115</span></li> 
</ul> 

je faire flotter à gauche, et quand il imprime la deuxième page, il laisse de la partie du nom de la liste (dans Firefox, fonctionne très bien dans Google Chrome et IE), voir ici: http://cl.ly/de965aea63f66c13ba32

Je fais référence à ceci: http://www.alistapart.com/articles/goingtoprint/ - ils ont mentionné quelque chose au sujet de l'application d'un flotteur: aucun; à la partie du contenu de la page. Si je fais cela, comment devrais-je faire pour que la liste apparaisse dans 4 colonnes? C'est une liste dynamique, tirée d'une base de données.

Toute aide est appréciée.

Answer 1

Si le but de la liste est d'associer des noms à des extensions, un dl ou table serait plus approprié. Si le but de la liste est simplement à la liste des noms et les extensions sont juste ... en plus, je suppose que vous êtes bien avec le ul - comme pour ce ul, ce CSS semble fonctionner bien ici:

/**/@media print { 
ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    font: 12px/18px sans-serif; 
} 
li { 
    float: left; 
    width: 24%; 
    margin: 0 1% 0 0; 
    position: relative; 
    border-bottom: 1px solid gray; 
} 
li 
span { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
/**/}