Pregunta de posicionamiento CSS - Tablas vs. Absoluto vs. DL

Question

Me gustaría alinear pares de etiqueta/valor en el centro usando CSS sin usar posicionamiento absoluto o tablas (ver captura de pantalla). En esa captura de pantalla posicioné el valor (es decir, $ 4,500/wk) absoluto y luego hice flotar la etiqueta directamente contra ella. Pero absoluto no funciona tan bien en IE y he escuchado que no es una buena técnica.

Pero, ¿cómo puedo lograr este efecto donde todas las etiquetas están justificadas sin absoluto?

alt text http://www.amherstparents.org/files/shot.jpg

Answer 1

Estoy confundido, ¿qué hay tabular acerca de esos datos? ¿Dónde están los registros? Las filas de diferentes campos en realidad no forman una tabla en el sentido tradicional. (Tampoco hackearlo para tener dos registros por fila para ese asunto)

Si estamos entreteniendo esta idea, ¿cuál es la diferencia entre la mitad izquierda de la mesa y la derecha? ¿Cuáles serían los encabezados de las columnas si hubiera alguno?

Prefiero la sugerencia de la lista de definiciones, definitivamente es una mejor opción que una tabla. Y no necesitaría dos columnas si todos los DT y DD fueran flotantes: izquierda y ancho: 25%, y en el siguiente orden: Costo, Mascotas, Dormir, Fumar, etc. Por lo tanto, puede usar 1 lista de definiciones, como realmente debería ser

Aunque es probable que necesite un claro: a la izquierda en cualquier otro DT por si el contenido de cualquiera de estos elementos se ajusta a dos líneas.

<style> 
    dl 
    { 
     float:left; 
     width:100%; 
    } 
    dt, 
    dd 
    { 
     float:left; 
     width:24%; 
     margin:0; 
     padding:0; 
    } 
    dt 
    { 
     text-align:right; 
     padding-right:.33em; 
    } 
    dd 
    { 
     text-align:left; 
    } 
</style> 
<dl> 
    <dt>Cost:</dt> 
    <dd>$4,500/wk</dd> 
    <dt>Pets:</dt> 
    <dd>No</dd> 
    <dt>Sleeps:</dt> 
    <dd>1</dd> 
    <dt>Smoking:</dt> 
    <dd>No</dd> 
</dl> 

Answer 2

Si usted está mostrando datos tabulares no hay vergüenza en el uso de una mesa.

Answer 3

Utilice divs de ancho fijo con la propiedad CSS text-align. No te olvides de dejar tus divs a la izquierda.

Answer 4

Digamos que usted está utilizando DL, DT y DD:

<dl> 
<dt>Cost:</dt> 
<dd>$4,500/wk</dd> 
<dt>Sleeps:</dt> 
<dd>1</dd> 
</dl> 

Se puede utilizar el siguiente CSS aproximada (no probado):

dl { width: 200px; } 
dt { width: 100px; text-align: right; float: left; clear: both; } 
dd { width: 100px; margin: 0; float: left; } 

Edit: Como Chris Marasti-Georg señaló :

Además, si lo desea 2 columnas, uso 2 listas de definición, y flotar

Answer 5

@jon es correcto, si se trata de datos tabulares, puede utilizar una tabla. Sin embargo, si realmente no desea utilizar una tabla, creo que esto es lo que quiere:

CSS

.label { 
    min-width: 20%; 
    text-align: right; 
    float: left; 
} 

HTML

<div class="pair"> 
    <div class="label">Cost</div> 
    <div class="value">$4,500/wk</div> 
</div> 
<div class="pair"> 
    <div class="label">Sleeps</div> 
    <div class="value">1</div> 
</div> 
<div class="pair"> 
    <div class="label">Bedrooms</div> 
    <div class="value">9</div> 
</div> 

EDITAR @ Chris Marasti-Georg señala que las listas de definiciones serían más apropiadas aquí. Estoy de acuerdo, pero creo que quería mostrar que lo mismo se puede hacer fácilmente con cualquier elemento de nivel de bloque, y no hay nada en el estilo predeterminado de listas de definición que se necesita para lograr este objetivo.

Answer 6

¿Qué le parece usar una tabla para diseñar la tabla y luego usar CSS para colocar esa tabla donde desee en su página?

Answer 7

La expansión en el poste de Rahul:

CSS

#list { width: 450px; } 
#left { float: left; background: lightgreen; } 
#right { float: right; background: lightblue; } 
dl { width: 225px; } 
dt { width: 100px; text-align: right; float: left; clear: both; } 
dd { width: 100px; margin: 0; float: left; padding-left: 5px; } 

HTML

<div id="list"> 
    <dl id="left"> 
     <dt>Cost:</dt> 
     <dd>$4,500/wk</dd> 
     <dt>Sleeps:</dt> 
     <dd>1</dd> 
     <dt>Bedrooms:</dt> 
     <dd>9</dd> 
     <dt>Baths:</dt> 
     <dd>6</dd> 
    </dl> 
    <dl id="right"> 
     <dt>Pets:</dt> 
     <dd>No</dd> 
     <dt>Smoking:</dt> 
     <dd>No</dd> 
     <dt>Pool:</dt> 
     <dd>No</dd> 
     <dt>Waterfront:</dt> 
     <dd>No</dd> 
    </dl> 
</div> 

Probé esto bajo FF 3.0.1, IE6 y IE7. El color de fondo está simplemente allí para ayudarlo a visualizar dónde comienzan y terminan las columnas.

Answer 8

Una nota rápida sobre la implementación de este uso de tablas, hay varias construcciones que harán que este sea accesible. El más sencillo de los cuales sería simple de usar TH para las etiquetas y TD para los valores. This site tiene una buena discusión, y profundiza en cosas como los encabezados de las celdas, etc.

Answer 9

Siempre he tratado listas de definición como para ser utilizado para las definiciones de los objetos, no para los pares clave/valor. (9 no es una definición de 'dormitorios'). Sin embargo, este constructo en particular (listas de pares clave/valor) ha estado causando argumentos durante años ya que no existe un marcado semántico nativo que lo refleje adecuadamente.

Vaya por un DL si no es anal acerca de lo que es una definición. O ve por una mesa. Una tabla con pares clave/valor en filas, si el ámbito del encabezado/celda está configurado correctamente, es perfectamente válida. He estado haciendo esto recientemente, y parece ser la representación más semánticamente precisa.