Es ist üblich, dass eine Reihe von Links in einer Fußzeile in einer Liste dargestellt wird, z.
<div id="footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Ich möchte, dass alles in der div # -Fußzeile horizontal zentriert ist. Wenn es ein Absatz wäre, würden Sie einfach sagen : p { text-align: center; }
. Oder wenn ich die Breite des wüsste, <ul>
könnte ich einfach sagen#footer ul { width: 400px; margin: 0 auto; }
.
Aber wie zentrieren Sie die ungeordneten Listenelemente, ohne eine feste Breite für das festzulegen? <ul>
?
BEARBEITEN: Klarstellung - Die Listenelemente sollten nebeneinander und nicht unten stehen.
display: inline-block
auf Ihrem<li>
s? Sie können sie mit Textausrichtung zentrieren, und dennoch verhalten sie sich bei Bedarf wie ein Block.Verwenden Sie das folgende CSS, um Ihr Problem zu lösen
#footer{ text-align:center; height:58px;} #footer ul { font-size:11px;} #footer ul li {display:inline-block;}
Hinweis : Nicht
float:left
in li verwenden. es wird dein li dazu bringen, sich links auszurichten.quelle
Noch eine Lösung:
#footer { display:table; margin:0 auto; } #footer li { display:table-cell; padding: 0px 10px; }
Dann springt ul beim Zoomen von Text nicht in die nächste Zeile.
quelle
Es hängt davon ab, ob Sie meinen, dass die Listenelemente unter dem vorherigen oder rechts vom vorherigen liegen, dh:
oder
Der erste, mit dem Sie einfach arbeiten können:
#wrapper { width:600px; background: yellow; margin: 0 auto; } #footer ul { text-align: center; list-style-type: none; }
Das zweite könnte so gemacht werden:
#wrapper { width:600px; background: yellow; margin: 0 auto; } #footer ul { text-align: center; list-style-type: none; } #footer li { display: inline; } #footer a { padding: 2px 12px; background: orange; text-decoration: none; } #footer a:hover { background: green; color: yellow; }
quelle
Versuchen Sie, die Liste in ein Div zu verpacken, und geben Sie diesem Div die Inline-Eigenschaft anstelle Ihrer Liste.
quelle
Die Antwort von philfreo ist großartig, es funktioniert perfekt (browserübergreifend, mit IE 7+). Fügen Sie einfach meine Exp für das Ankertag in li hinzu.
#footer ul li { display: inline; } #footer ul li a { padding: 2px 4px; } /* no display: block here */ #footer ul li { position: relative; float: left; display: block; right: 50%; } #footer ul li a {display: block; left: 0; }
quelle