CSS: Izquierda, Centro y Derecha Alinean el texto en la Misma Línea

La forma mágica de HTML5 que funciona responsablemente es usar 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 /

Encontrará que evita la envoltura incómoda de la caja que se produce con los flotadores en una pantalla pequeña.

Tal vez esto funcione:

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

Una variación de la gran solución de JCBiggar es omitir el ancho y la alineación de texto para .alignright, sino simplemente para flotar hacia la derecha. La ventaja de esto es que elimina la preocupación de que los elementos internos tengan márgenes establecidos o rellenos, haciendo que el 33.33% * 3 exceda el ancho del 100% del elemento contenedor. La colocación deseada de .alignright se puede efectuar de forma mucho más sencilla.

El CSS sería entonces:

.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;
}​

Esto funcionó bien para mí cuando tenía elementos que requerían rellenos de cantidades establecidas (y no se pueden representar como porcentajes), como se muestra arriba en el CSS.

Y ahora un enfoque fresco, bastante diferente.

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