Evenly Space Links in div

Question

Ich mache eine einfache Website für die Hochschule, die ich hasse, aufgrund der Gestaltung. Ich bin ein PHP-Programmierer, kein Designer. (Kann dumm klingen)

Ich habe in ein Problem gerannt, ich habe ein zentriertes div von 600px dann innerhalb <nav> Tags habe ich 4 Links. Ich möchte, dass sie gleichmäßig verteilt sind, über das Div. Ich habe versucht, den Rand links und rechts zu setzen, hatte aber kein Glück.

einen Blick auf sie nehmen auf jsfiddle

Dank

Answer 1

Arbeits Demo:http://jsfiddle.net/8jK7N/1/

IE jedoch nicht unterstützt Styling der neuen HTML5-Elemente. Sie können shiv verwenden, um dieses Problem zu lösen. Arbeits Demo (mit Shiv): http://jsfiddle.net/8jK7N/2/

Answer 2

Nehmen Sie die <p>-Tag aus dem <nav> Bit, auch margin-left 73px und margin-right 73px auf jeder kann die Links machen zu breit für eine Linie in deinem div. Ich weiß, dass die Mathematik funktioniert, aber es kann sich seltsam verhalten.

Answer 3

Sie folgendes verwenden:

nav a{ 
    width:150px; display:block;float:left; 
} 

Wenn Sie zentriert wollen, dann hinzufügen:

text-align:center; 

Answer 4

Wenn Sie die margin-right auf der nav a entfernen es wird klappen. Der hinzugefügte Abstand am Rand rechts wird zur Box des Ankers hinzugefügt. Hier ist, wie das Box-Modell funktioniert: http://www.w3.org/TR/CSS2/box.html

Hinweis im IE scheint der html5 nav Selector nicht richtig zu funktionieren. Ich habe eine Klasse für das Absatz-Tag hinzugefügt und den Fix dieses Tags angewendet.

Dies ist, was in allen Browsern funktionieren: http://jsfiddle.net/RkUWU/2/