2010-12-28 7 views
7

Estoy escribiendo una página para jugar papeles con algunos amigos. Cuando se trata de la hoja de personaje, nos gustaría tener algunas tablas con las estadísticas. Me gustaría tener dentro de cada celda el nombre de la característica (fuerza, inteligencia, etc.) y el número. De esta manera: http://jordi.dyndns-at-home.com:3000/characters/2Alineando a la izquierda y derecha dentro de <td>

Me gustaría alinear los nombres a la izquierda de la celda y los números a la derecha.

He intentado con < span style = "text-align: right;" > y no funcionará. Lo he intentado con < div style = "text-align: right;" > y funciona, pero "salta una línea", si uso display: en línea no funcionará.

Es posible tener ambas alineaciones en un <td>?

BTW posición: absoluta; Derecha: 0 no funcionará. se alineará al final del no final de

+4

¿No es más fácil simplemente poner los nombres y números en sus propios td? – Oli

+1

Seguramente lo es, pero no tengo prisa y me gustaría aprender al hacer esa página web. – Jordi

Respuesta

9

Use listas de definiciones y sea semántico.

HTML

<table><tr><td> 
    <dl> 
     <dt>Life:</dt> 
     <dd>15</dd> 
    </dl> 
</td></tr></table> 

CSS

dl { 
    width: 200px; 
} 
dl dt { 
    width: 160px; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 
dl dd { 
    width: 40px; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

De esta manera se puede soltar toda la tabla.

+0

Pero no creo que pueda dejar caer la mesa. Quiero que la tabla se vea – Jordi

+0

@Jordi: dale un borde al dl (y ajusta el ancho) para que parezca una tabla. O mejor. – erenon

0

Aunque estoy de acuerdo con el comentario de Oli, supongo que puede lograrlo usando float:left y float:right.

8

Aquí se muestra un ejemplo:

<table> 
    <tr> 
     <td> 
      <span class='name'>name 1</span><span class='number'>100</span> 
     </td> 
    </tr> 
</table> 

Con el siguiente CSS:

.name{ 
    width: 200px; 
    display: inline-block; 
} 
.number{ 
    width: 200px; 
    display: inline-block; 
    text-align: right; 
} 

Esperamos que encuentre útil esta información. Aquí hay un jsFiddle para que te metas.

http://jsfiddle.net/K4fGq/

Bob

+0

OMG, la solución es buena, ¡pero jsfiddle es maravilloso! ¡Gracias una tonelada! – Jordi

+2

¿Qué pasa si el ancho no es estático, si quiero dar ancho en '%' puedo darlo? – KumarDharm

0

Si pones otra tabla dentro de la TD con dos TD, uno izquierdo y uno alineado a la derecha, va a trabajar y voy a bajar votado a favor de esta sugerencia.

Otro mecanismo es usar display: inline-block según lo sugerido por @rcravens: mi elección personal.

Cuestiones relacionadas