come distribuire uniformemente gli elementi in un div uno vicino all'altro?

Question

Questo è pensato per un menu.
Ad esempio, ho un elemento div con 3 span in esso, tutti con margini, larghezza massima e float (sinistra o destra).
E 'posizionato a partire dal lato sinistro e va in questo modo:
[[span1][span2][span3] - lots of free space here].
voglio rendere ancora come questo:
[[span1] - space - [span2] - space - [span3]]
Come posso fare questo usando i CSS? Dubito che non sia possibile.
Si noti che voglio mantenere lo stesso stile quando aggiungo o rimuovo una voce di menu.
HTML:

<div id="menu"> 
    <span class="menuitem"></span> 
    <span class="menuitem"></span> 
    <span class="menuitem"></span> 
</div> 

CSS:

#menu { 
    ... 
    width:800px; 
} 
.menuitem { 
    display:block; 
    float:left; 
    margin-left:25px; 
    position:relative; 
    min-height:35px; 
    max-width:125px; 
    padding-bottom:10px; 
    text-align:center; 
} 

Answer 1

Questo è il modo semplice e veloce per farlo

<div> 
    <span>Span 1</span> 
    <span>Span 2</span> 
    <span>Span 3</span> 
</div> 

css

div{ 
    width:100%; 
} 
span{ 
    display:inline-block;  
    width:33%; 
    text-align:center; 
} 

quindi regolare il width dei span s per il numero che hai.

Esempio: http://jsfiddle.net/jasongennaro/wvJxD/

Answer 2

Negli vecchi tempi 'devi usare un tavolo e voci di menu sarebbe distanziati in modo uniforme, senza dover dichiarare esplicitamente la larghezza per il numero di elementi.

Se non fosse per IE 6 e 7 (se ciò è motivo di preoccupazione), è possibile fare lo stesso in CSS.

<div class="demo"> 
    <span>Span 1</span> 
    <span>Span 2</span> 
    <span>Span 3</span> 
</div> 

CSS:

div.demo { 
    display: table; 
    width: 100%; 
    table-layout: fixed; /* For cells of equal size */ 
} 
div.demo span { 
    display: table-cell; 
    text-align: center; 
} 

senza dover regolare per il numero di elementi.

Esempio senza table-layout:fixed - le celle sono equamente distribuite su tutta la larghezza, ma non sono necessariamente di uguale dimensione poiché la loro larghezza è determinata dal loro contenuto.

• http://jsfiddle.net/w3dx/ULQwf/

Esempio con table-layout:fixed - le cellule sono di uguale dimensione, indipendentemente dal loro contenuto. (Grazie a @DavidHerse nei commenti per questa aggiunta.)

• http://jsfiddle.net/kqHWM/

Se si desidera che il primo e l'ultimo elementi del menu di essere lasciato e giustificato a destra, allora si può aggiungere il seguente CSS :

div.demo span:first-child { 
    text-align: left; 
} 
div.demo span:last-child { 
    text-align: right; 
} 

Answer 3

È possibile utilizzare giustificare.

Questo è simile alle altre risposte, tranne per il fatto che gli elementi di sinistra e di destra saranno ai bordi anziché essere equamente distanziati - [a ... b ... c invece di .a..b..c .]

<div class="menu"> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
</div> 

<style> 
.menu {text-align:justify;} 
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 } 
.menu > span {display:inline-block} 
</style> 

Un gotcha è che è necessario lasciare spazi tra ogni elemento. [Vedere il violino.]

Ci sono due ragioni per impostare le voci di menu per inline-block:

1. Se l'elemento è di default un elemento a livello di blocco (come un <li>) il display deve essere impostato su inline o inline-block per rimanere nella stessa riga.
2. Se l'elemento ha più di una parola (<span>click here</span>), ogni parola verrà distribuita in modo uniforme se impostata su inline, ma solo gli elementi verranno distribuiti quando impostati su inline-block.

See the JSFiddle

EDIT:
Ora che flexbox largamente sostenuto (tutti i non-IE, e IE 10+), c'è un "modo migliore".
Assumendo la stessa struttura di elemento come sopra, è sufficiente disporre di:

<style> 
    .menu { display: flex; justify-content: space-between; } 
</style> 

Se si desidera gli elementi esterni da distanziati così, basta passare spazio tra di spazio intorno.
See the JSFiddle

Answer 4

Se qualcuno vuole provare un approccio leggermente diverso, può utilizzare FLEX.

HTML

<div class="test"> 
    <div>Div 1</div> 
    <div>Div 2</div> 
    <div>Div 3</div> 
    <div>Div 4</div> 
</div> 

CSS

.test { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-around; 
} 
.test > div { 
    margin-top: 10px; 
    padding: 20px; 
    background-color: #FF0000; 
} 

Ecco il violino: http://jsfiddle.net/ynemh3c2/ (Prova ad aggiungere/rimuovere div pure)

Qui è dove ho imparato a conoscere questo: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

justify-content: space-between e display: flex è tutto ciò di cui avevamo bisogno, ma grazie a @Pratul per l'ispirazione!

Answer 6

Rende tutti gli intervalli utilizzati elementi di blocco inline. Crea un'estensione vuota con una larghezza del 100% sotto l'elenco di span contenenti le voci di menu. Quindi fai in modo che il div che contiene gli span sia allineato al testo: giustificato. Ciò forzerebbe quindi gli elementi di blocco in linea [le voci del menu] a distribuire uniformemente.

https://jsfiddle.net/freedawirl/bh0eadzz/3/

<div id="container"> 

      <div class="social"> 
      <a href="#" target="_blank" aria-label="facebook-link"> 
      <img src="http://placehold.it/40x40"> 
      </a> 
      <a href="#" target="_blank" aria-label="twitter-link"> 
       <img src="http://placehold.it/40x40"> 
      </a> 
      <a href="#" target="_blank" aria-label="youtube-link"> 
       <img src="http://placehold.it/40x40"> 
      </a> 
      <a href="#" target="_blank" aria-label="pinterest-link"> 
       <img src="http://placehold.it/40x40"> 
      </a> 
      <a href="#" target="_blank" aria-label="snapchat-link"> 
       <img src="http://placehold.it/40x40"> 
      </a> 
      <a href="#" target="_blank" aria-label="blog-link"> 
       <img src="http://placehold.it/40x40"> 
      </a> 

      <a href="#" aria-label="phone-link"> 
       <img src="http://placehold.it/40x40"> 
      </a> 
      <span class="stretch"></span> 
      </div> 
      </div>