✔ Horizontale Liste mit fester Elementbreite zentrieren

[Azi]

Hallo,
ich habe folgendes Problem:
Eine Navigation hat width:100%. Die enthaltenen Punkte sollen alle eine bestimmte Breite haben, 150px. Und all diese Elemente sollen Zentriert werden.

Ich bekomm das Problem nicht geknackt... Um den Listenelementen eine feste Breite zu geben, müssen sie entweder gefloatet werden (float kann aber kein center), oder etwas anderes haben als display:inline (was aber der fall sein soll). Weiß jemand Rat?

Azi

 

[Gumbo]

Es gibt noch den display-Eigenschaftswert inline-block.

 

[Azi]

...welche allerdings nicht in allen Browsern funktioniert

 

[Maik]

Hi,

ansonsten wirst du für das übergeordnete Listenelement die Gesamtbreite aller Navigationspunkte und margin:0 auto bestimmen müssen, um es im Fenster horizontal zu zentrieren:

ul {
width: 600px;
margin: 0 auto;
list-style: none;
}

li {
float: left;
width: 150px;
text-align: center;
background: #cacaca;
}

<ul>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
</ul>

 

[Azi]

Das Problem ist, dass das übergeordnete Element ja eine Breite von 100% hat (was designtechnische Gründe hat ).

 

[Maik]

Okay, vielleicht kannst du mit diesem "Workaround" leben, bei dem das DIV #wrapper die Rolle des übergeordneten Elements mit der 100%-Breite übernimmt?

div#wrapper {
background: #ff0000;
}

ul#nav {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}

ul#nav li {
float: left;
width: 150px;
text-align: center;
background: #cacaca;
}

.clear {
clear: left;
font-size: 1px;
line-height: 0;
}

<div id="wrapper">
        <ul id="nav">
            <li><a href="#">test</a></li>
            <li><a href="#">test</a></li>
            <li><a href="#">test</a></li>
            <li><a href="#">test</a></li>
        </ul>
        <div class="clear">&nbsp;</div>
</div>