Perché questi div non sono allineati orizzontalmente? Perché si interrompe la linea?

Question

Questo HTML:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
</div>

Perché sono i div rosse non nella stessa riga orizzontale e come faccio a ottenere nella stessa riga?

Answer 1

Ok, quindi il div sono elementi di blocco e qualche volta usa div per contenere i menu. Quindi puoi aggiungere la proprietà di stile chiamata display: inline-block alle div interne e se vuoi che quelle div siano centrate all'interno del contenitore div puoi usare text-align: center. Funzionerà su tutti i tipi di elementi di blocco.

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>

Answer 2

Questo è il comportamento predefinito di div s e tutti gli altri elementi del blocco. Per cambiarlo è necessario impostare display a inline-block o float a left o right. (L'impostazione float: left; giustifica gli elementi sul lato sinistro del loro contenitore e float: right; li giustifica sul lato destro.) Suggerirei di praticare con inline-block. In genere è una soluzione migliore perché lascia gli elementi nel flusso normale del documento anziché rimuoverli dall'interazione con elementi adiacenti, come fa float.

Answer 3

Ecco ciò che si cerca:

<style type="text/css"> 
    div.littleDiv { 
     display: inline-block; 
     border:1px 
     solid red; 
     height:50px; 
     width:80px; 
    } 
</style> 
<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
</div> 

Questo è stato possibile per un lungo periodo con float, ma ora con inline-block è ancora più facile. gli elementi inline-block sono come elementi inline ma possono avere larghezza e altezza.

Tuttavia si potrebbe desiderare di utilizzare float: lefts invece di display: inline-block;

Da MDN

La proprietà float CSS specifica che un elemento dovrebbe essere preso dal flusso normale e posizionato lungo il lato sinistro o destro lato del suo contenitore, dove il testo e gli elementi in linea si avvolgeranno attorno ad esso. Un elemento fluttuante è uno in cui il valore calcolato di float non è nessuno.

Answer 4

Div Gli elementi sono elementi in stile blocco, per impostazione predefinita. al fine di rendere in lvl orizzontali rendere lo stile attributo di visualizzazione inline-block o galleggiante a destra oa sinistra:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
</div> 

O:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
    </div> 

Answer 5

Questo ha fatto il trucco, le altre risposte mancava questo dettaglio text-align: center ;.

Grazie ragazzi!

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>