Wie verbreiten-Elemente horizontal gleichmäßig?

Ich habe ein 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.

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 der 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 |

Das ist:

  • ungefähr gleicher Abstand zwischen allen Elementen
  • Zentrum der ganzen 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;
}
  • Ausgewählte Antwort
    Nelson Rothermel
    5. November 2010

    Versuchen Sie dieses (http://jsfiddle.net/BYEw5/):

    <div class="container">
  <div>A</div><div>B</div><div>C</div>
</div>

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 33%;
    text-align: center;
}

    Da bist du im Umgang 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 Fragen: 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 divs, die Sie tun könnten:

    .container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    margin-left: 2%;
    width: 32%;
    text-align: center;
}

.container > div:first-child {
    margin-left: 0;
}

6 Antworten

  • Diodeus - James MacFarlane
    5. November 2010

    Ich bin mir nicht sicher, was genau Ihre HTML ist, aber versuchen Sie dies: http://jsfiddle.net/k9FqG/

    <div class="test">
    <a href="">A</a>
    <a href="">B</a>
    <a href="">C</a>
    <div class="clear"></div>
</div>

.clear {
   clear:both;   
}

.test {
   width:350px;
   text-align:center;
   border:1px solid #ff0000
}

.test a {
    display:block;
    float:left;
    width:33%;
}
  • Cᴏʀʏ
    5. November 2010

    Dies sollte Ihnen den Einstieg:

    <style type="text/css">

#container {
    width: 210px;
    border: 1px solid blue;
}

#container .part {
    width: 68px; /*(210 / 3 - borders)*/
    float: left;
    text-align: center;
    border: 1px solid yellow;
}

.clear {
    height: 0;
    line-height: 0;
    overflow: hidden;
    font-size: 0;
    clear: left;
}

</style>

    Und dann die HTML:

    <div id="container">
    <div class="part">A</div>
    <div class="part">B</div>
    <div class="part">C</div>
    <div class="clear">&nbsp;</div>
</div>

    Ich habe nur Hinzugefügt Grenzen, so dass Sie sehen konnte, was CSS tut.

  • Nomistake
    20. September 2012

    wie etwa text-align:justify; ?

  • Josh Crozier
    1. Januar 2016

    CSS3 flexboxes haben bessere browser-Unterstützung jetzt, obwohl Sie möglicherweise zusätzliche vendor-Präfixe für mehr browser-Abdeckung.

    Moderner Ansatz:

    Ändern Sie einfach die display der container-element flex und dann nutzen Sie die justify-content Eigenschaft , um festzulegen, wie der browser verteilen sollte der Raum um und zwischen den flex-items, die entlang der Hauptachse.

    Im Beispiel unten, sehen Sie, dass justify-content: space-around oder justify-content: space-between werden verwendet, um den Raum, die Elemente gleichmäßig.

    .container {
  display: flex;
}
.container.space-around {
  justify-content: space-around;
}
.container.space-between {  
  justify-content: space-between;
}
    <p>Using <code>justify-content: space-around</code>:</p>
<div class="container space-around">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<hr />

<p>Using <code>justify-content: space-between</code>:</p>
<div class="container space-between">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

  • Arun Kumar A.J
    20. Februar 2019

    Ich wollte Sie einige hover-Effekt und justify-content: space-between war nicht sehr sauber. Das half bei mir.

    <div style="display: flex;">
  <div style="flex: 1 1 auto"> A </div>
  <div style="flex: 1 1 auto"> B </div>
  <div style="flex: 1 1 auto"> C </div>
</div>

    (Ich ursprünglich bekam diese Antwort von einem anderen S. O. Antwort eine sehr lange Zeit. Verzeihen Sie mir für nicht zu erwähnen, ursprüngliche Kredit, wie, weiß ich nicht)

  • Nick
    4. Mai 2019

    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 Referenz

     .container {
  display: flex;
  justify-content: space-evenly;
}