Wie verbreiten-Elemente horizontal gleichmäßig?
Ich habe eine div
container auf meiner web-Seite mit fester Breite und enthält die Formular-Elemente für die Anmeldung. Unter diesen Elementen gibt es einen submit-button den link " Kennwort vergessen usw.
Ist es passiert, die Letzte Zeile Elemente benötigt weniger Breite als die box bietet. Wie verteilen Sie Sie gleichmäßig? Ich will nicht
- Standard
| A B C |
- zentrieren Sie die Zeile wie
| A B C |
- noch table-layout
| A | B | C |
Stattdessen bin ich auf der Suche für einige CSS-Weise zu erreichen:
| A B C |
Ist:
- ungefähr gleicher Abstand zwischen allen Elementen
- center die ganze Sache zu vermeiden, die erste oder Letzte auf der Seite
edit:
Diese Antwort besten funktioniert. Ich erstellte Vorlagen für 2 oder 3 Elemente:
div.spread2evenly > div { display: inline-block; *display: inline; /* Für IE7 */ zoom: 1; /* Trigger hasLayout */ width: 50%; text-align: center; }
- Check meine Antwort auf
-moz-inline-box
(oder-moz-inline-stack
?). Auch, vergessen Sie nicht die Einschränkung, dass es keine Leerzeichen zwischen den</div><div>
- tags. Zwischen diesem und dem klaren sowohl-Methode, sollten Sie haben was Sie brauchen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen, diese (http://jsfiddle.net/BYEw5/):
Da man sich mit inline-block, können Sie keine Leerzeichen zwischen den tags (hässlich, aber es funktioniert), ansonsten wird der Raum sichtbar.
Edit 1:
Hier ist einige weitere Infos auf der inline-block Themen: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. Sie können auch hinzufügen
display: -moz-inline-box;
.Edit 2:
Auch, 33%*3 ist nicht zu 100%. Wenn du wirklich 100% wollen und nicht dagegen, etwas Platz zwischen den
div
s, die Sie tun könnten:div
s, nicht nur genau dreidiv
s? Dies wäre nützlich für den Fall, wenn es nicht möglich zu sagen, wie vielediv
s die.container div
haben.justify-content
von (space-between
oderspace-around
) vielleicht die beste Lösung, um einem solchen Szenario: css-tricks.com/snippets/css/a-guide-to-flexboxCSS3 flexboxes haben bessere browser-Unterstützung jetzt, obwohl Sie möglicherweise zusätzliche vendor-Präfixe für mehr browser-Abdeckung.
Modernen Ansatz:
Ändern Sie einfach die
display
des container-element, inflex
und dann nutzen dierechtfertigen-content
Eigenschaft, um festzulegen, wie der browser verteilen sollte der Raum um und zwischen den flex-items, die entlang der Hauptachse.In dem folgenden Beispiel, werden Sie feststellen, dass
justify-content: space-around
oderjustify-content: space-between
werden verwendet, um den Raum, die Elemente gleichmäßig.CSS:
HTML:
wie etwa
text-align:justify;
?height: 0
undwidth: 100%
Ich weiß, das ist eine alte Frage, aber wenn jemand noch passiert, zu suchen, dafür gibt es jetzt eine noch einfachere option, mit flexboxes:
justifiy-content: space-evenly
. Der name ist ziemlich selbsterklärend. Hier eine ReferenzIch bin mir nicht sicher, was genau Ihre HTML ist, aber versuchen Sie dies: http://jsfiddle.net/k9FqG/
Dieser sollte Ihnen den Einstieg:
Und dann die HTML:
Ich nur Hinzugefügt, Grenzen, so dass Sie sehen konnte, was CSS tut.
Wollte ich durchführen einige hover-Effekt und
justify-content: space-between
war nicht sehr sauber. Das half bei mir.(Von der ich ursprünglich kam diese Antwort aus einem anderen S. O. Antwort eine sehr lange Zeit. Verzeihen Sie mir für nicht zu erwähnen, ursprüngliche Kredit, da ich nicht weiß)