CSS Justifier largeur de 5 liens en 412px

Question

Je veux avoir cinq liens en ligne avec un remplissage approximatif de: 5px 8px 5px 8px; et marge fixe de: 0px 2px 0px 2px; uniformément répartie en ligne dans une largeur 412px div

Voici un exemple: http://www.branklin.com/questions/css_justified_links.php

Answer 1

C'est le plus proche je pourrais l'obtenir ... Vous avez besoin d'ajouter un autre div autour des liens, ou ils ne peuvent pas avoir un rembourrage/marges en même temps que d'être relativement de taille. À moins que votre marge et vos marges ne soient également relatives%.

.section_left div {float:left;width:20%;} 
.section_left a:link, .section_left a:visited { 
    display:block;margin:4px 0 0 2px;padding:5px 8px 5px 8px; 
    text-decoration:none;background-color:#e6e6e6;color:#666; 
    font-size:18px;font-family:Helvetica; } 

<div><a href="#">..</a></div> # do this for each link 

Qu'est-ce qui se passe ici est que le display:block; intérieur du a -tag provoque pour remplir automatiquement la balise parent, donc pas de largeur est nécessaire, et le rembourrage et les marges sont ajustées automatiquement. Notez que le float:left; est déplacé vers les divs. L'alternative est bien entendu de définir une largeur fixe pour les liens, en tenant compte du remplissage et des marges et de la largeur maximale, mais vous obtiendrez une valeur de pixel en virgule flottante, ce qui n'est pas très agréable.

Answer 2

la manière la plus simple de le faire avec la propriété d'affichage (table, table-ligne et table-cellule).

exemple:

css:

div#links { 
    display: table; 
    width: 412px; 
    border: dotted 1px gray; 
} 
div#links ul { 
    display: table-row; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
div#links ul li { 
    display: table-cell; 
    text-align: center; 
} 
div#links ul li a { 
    padding: 5px 8px; 
    background-color: gray; 
    color: white; 
} 

et le code html:

<div id="links"> 
    <ul> 
    <li><a href="#">Daily</a></li> 
    <li><a href="#">Weekly</a></li> 
    <li><a href="#">Monthly</a></li> 
    <li><a href="#">Quarterly</a></li> 
    <li><a href="#">Yearly</a></li> 
    </ul> 
</div>