CSS: sinistra, centro e allineamento destro del testo sulla stessa riga

Question

Devo lasciare, centro, & allineare destra testo sulla stessa riga. Ho il seguente testo:

• Sinistra Allinea: 1/10
• Centro: 02:27
• Allinea a destra: 100%

ho scritto il seguente codice che funziona per la sinistra e allineare correttamente il testo ma non funziona correttamente per il testo centrale.

HTML

<div id="textbox"> 
<p class="alignleft">1/10</p> 
<p class="aligncenter">02:27</p> 
<p class="alignright">100%</p> 
</div> 
<div style="clear: both;"></div> 

CSS

.alignleft { 
    float: left; 
} 
.aligncenter { 
    float: left; 
} 
.alignright { 
    float: right; 
} 

Answer 1

Prova questa

AGGIORNATO

HTML

<div id="textbox"> 
<p class="alignleft">1/10</p> 
<p class="aligncenter">02:27</p> 
<p class="alignright">100%</p> 
</div> 
<div style="clear: both;"></div>​ 

CSS

.alignleft { 
    float: left; 
    width:33.33333%; 
    text-align:left; 
} 
.aligncenter { 
    float: left; 
    width:33.33333%; 
    text-align:center; 
} 
.alignright { 
float: left; 
width:33.33333%; 
text-align:right; 
}​ 

Demo il codice qui: http://jsfiddle.net/wSd32/1/ Spero che questo aiuti!

Answer 2

Forse questo funziona:

p{width:33%;float:left;} 
.alignleft{text-align:left;} 
.aligncenter {text-align:center;} 
.alignright {text-align:right;} 

Answer 3

Una variante dell'ottima soluzione di JCBiggar consiste nel saltare la larghezza e l'allineamento del testo per .alignright, ma semplicemente per farlo fluttuare verso destra. Il vantaggio di ciò è che elimina la preoccupazione che gli elementi interni abbiano margini o paddings impostati, rendendo il 33.33% * 3 superiore alla larghezza del 100% dell'elemento contenitore. La posizione desiderata di .alignright può essere effettuata molto più semplicemente.

Il CSS sarebbe allora:

.alignleft { 
    float: left; 
    width:33.33333%; 
    text-align:left; 
    padding-left: 10px; 
} 
.aligncenter { 
    float: left; 
    width:33.33333%; 
    text-align:center; 
} 
.alignright { 
    float: right; 
    padding-right: 10px; 
}​ 

questo ha funzionato bene per me quando ho avuto gli elementi che hanno richiesto imbottiture di importi (e non potrebbe essere rappresentata come percentuale) - come mostrato sopra nel CSS.

Answer 4

Il modo HTML5 magia che funziona in risposta è quello di utilizzare Flex:

<div id="textbox"> 
<p class="alignleft">1/10</p> 
<p class="aligncenter">02:27</p> 
<p class="alignright">100%</p> 
</div> 
<div style="clear: both;"></div> 

CSS

#textbox { 
    display: flex; 
    justify-content: space-between; 
} 

Demo:

http://jsfiddle.net/sep4kf6a/1/

Troverete evita la scomoda involucro che si verifica con galleggianti su un piccolo schermo.

Answer 5

E ora un approccio nuovo, molto diverso.

.same-line { 
 
    height: 10px; /*childrens it's all absolute position, so must set height*/ 
 
    position: relative; 
 
} 
 
.same-line div{ 
 
    display: inline-block; 
 
    position: absolute; 
 
} 
 
.on-the-left{ 
 
left:0px; 
 
} 
 
.on-the-center{ 
 
    left: 0%; 
 
    right: 0%; 
 
    text-align: center; 
 
} 
 
.on-the-right{ 
 
    right: 0px; 
 
}

<div class="same-line"> 
 
    <div class="on-the-left" >it's Left</div> 
 
    <div class="on-the-center" >this Centrer bla bla bla</div> 
 
    <div class="on-the-right" >it's Right</div> 
 
    </div>