text-align: justify funktioniert nicht

Question

HTML

<div id="menu"> 
    <a href="#">Commissions</a> 
    <a href="#">Business Setup</a> 
    <a href="#">Administrator</a> 
    <a href="#">Content Management</a> 
    <a href="#">Inventory</a> 
    <a href="#">Communications Tools</a> 
    <a href="#">Genealogy</a> 
    <a href="#">Reports</a> 
</div> 

CSS

#menu { 
    width: 1000px; 
    float: left; 
    font-size: 9pt; 
    text-align: justify; 
} 
#menu a { 
    text-decoration: none; 
    color: #0066cc; 
    font-size: 9pt; 
} 
#menu a:hover { 
    text-decoration: underline; 
} 

ich je Links machen wollen die gesamte Breite zu haben. Ich habe versucht, dies mit text-align: justify zu implementieren. Aber es funktioniert nicht. Wie kann ich das machen?

Answer 1

Nein. Alle Links haben unterschiedliche Länge. Die Länge zwischen diesen Links sollte jedoch gleich sein.

Ich habe nur eine Tabellenlösung. http://jsfiddle.net/Flack/Q7z6q/

Ich weiß, es ist schmutzig und wird froh sein, wenn jemand mit einer besseren Idee kommt.

Answer 2

Ich bin mir nicht sicher, ob ich Ihre Frage vollständig verstehe, aber durch die Geräusche von Dingen, die Sie wollen, rechtfertigen Sie etwas, für das es nicht entwickelt wurde.

Nur wenn eine Textzeile am rechten Rand eines Containers umgebrochen wird, wird der Text ausgerichtet.

Dies kann jedoch nicht wirklich in Ihrem Menü passieren.

Also statt einer justify fix (ich sage fix, obwohl nichts kaputt ist), habe ich stattdessen einen anderen Vorschlag.

Von meinem Verständnis wollen Sie Ihre Links gleichmäßig über Ihr div verteilt.

Der beste Weg, den ich mir vorstellen kann, ist, den a-Elementen eine prozentuale Breite basierend auf der Anzahl der Links zu geben und sie an der Mitte auszurichten, anstatt zu justieren.

Zum Beispiel:

#menu a { 
    text-decoration: none; 
    color: #0066cc; 
    font-size: 9pt; 
    width: 12%; 
    display: inline-block; 
    text-align: center; 
} 

Ich weiß nicht, ob es ist das, was Sie wollen, aber Sie können es versuchen und sehen, was Sie denken.

Answer 3

Dies wird gleichmäßig verteilt divs (können Links oder über jedes Element sein). Das Problem, auf das Sie hingewiesen haben, ist, dass "justify" nicht für eine einzelne Textzeile (oder die letzte Textzeile) funktioniert. Deshalb brauchen Sie das: nach dem Pseudo-Element.

Html:

<div class="wrapper"> 
    <div>This can be anything.</div> 
    <div>This can be anything.</div> 
    <div>This can be anything.</div> 
    <div>This can be anything.</div> 
    <div>This can be anything.</div> 
    <div>This can be anything.</div> 
</div> 

Css:

.wrapper{ 
    text-align: justify; 
} 
.wrapper div{ 
    display: inline-block; 
} 
.wrapper:after{ 
    content: ""; 
    width: 100%; 
    display: inline-block; 
}