Navigation in gleichmäßigem Abstand erstellen

Hab jetzt schon einiges ausprobiert und gefühlt alle Posts gelesen, aber leider finde ich die Lösung nicht.

Ich möchte beim theme "gopress" die Top-Navigation so aufbauen, dass die einzelnen Navigationsblöcke immer gleich breit sind, quasi so breit wie der längste Navigationspunkt.

Mein css sieht wie folgt aus. Danke schon mal für die Hilfe!!!

C*

/*-------------------------------------------------*
/* = Navigation
/*-------------------------------------------------*/
#navigation {
background: #5b5a5a;
height: 55px;
margin-bottom: 25px;
border-bottom: 4px solid #ddd;
font-family: 'Helvetica Nue', Arial;
}
/*** ESSENTIAL Navigation Style ***/
.sf-menu,
.sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu { line-height: 1.0 }
.sf-menu ul {
position: absolute;
top: -999em;
width: 160px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li { width: 100% }
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float:left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 55px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul { top: -999em }
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 180px; /* match ul width */
top: 0;
}
/*** navigation skin ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
height: 55px;
line-height: 55px;
font-size: 13px;
font-weight: bold;
color: #ddd;
padding: 0 20px;
text-decoration: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.sf-menu li{
padding-right: 2px;
background-image: url("images/nav-border.png");
background-position: right top;
background-repeat: no-repeat;
}
/*
.sf-menu li:last-child{
background-image: none;
}
*/
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active,
.sf-menu li.sfHover > a {
color: #fff;
background-color: #000;
}
#navigation .current-menu-item {

}
#navigation .current-menu-item > a:first-child {
color: #fff;
background-color: #000;
border-bottom: 4px solid #1f82cb;
height: 59px;
line-height: 59px;
margin-left: -1px;
}
/*Subs*/
.sf-menu ul{
background: #444;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.4);
box-shadow: 0 0 3px rgba(0,0,0,.4);
}
.sf-menu ul a{
margin: 0px;
font-size: 12px;
padding: 15px 20px;
line-height: 1em;
height: auto;
font-weight: normal;
background-image: none;
}
.sf-menu ul li{
border: none;
background-image: none;
}
.sf-menu ul a:focus,
.sf-menu ul a:hover,
.sf-menu ul a:active {
color: #fff;
}
.sf-menu ul .current-menu-item a{
color: #fff;
border: none !important;
}
.sf-menu ul li:last-child{
border-bottom: 0px;
}

 

Hat niemand eine Idee???
Hab schon mit align center und so was probiert, aber ohne Erfolg.
Wäre dankbar über jede Antwort

 

Hallo Stefan, danke für die Antowrt!

Hat hervorragend funktioniert. Ich hab folgendes geändert:

.sf-menu a {
display: block;
margin: 0 auto;
width: 194px;
position: relative;

Wüsstest du auch noch, wie ich jetzt den Text innerhalb des Menüpunktes auch zentriert bekomme?

LG Claudia

 

Hallo endcore! Danke auch für deine Antwort. Fand den Artikel sehr interessant, aber bei mir hats nicht funktioniert, ich hab folgendes geändert:
.sf-menu { line-height: 1.0 }
.sf-menu ul {
text-align: justify;
position: absolute;
top: -999em;
width: 160px/* left offset of submenus need to match (see below) */

Aber nichts ist passiert...

Die Frage ist, inwieweit Stefans Lösung mri bei anderen Auflösungen einen Strich durch die rechnung macht?!?

LG Claudia