CSS para diseñar la leyenda de claves/valores horizontalmente.

Estoy creando una leyenda horizontal en html/css. Tengo un cuadro de color con un poco de texto al lado de él, y luego un poco de espacio, a continuación, otra caja de color con un texto, un espacio, etc.CSS para diseñar la leyenda de claves/valores horizontalmente.

[blue] - LabelA [green] - LabelB [red] - LabelC

no puedo encontrar la manera de hacer esto navegadores. Intenté todas las combinaciones de divs/spans flotantes en los que puedo pensar, pero o bien la etiqueta termina yendo por debajo de la casilla de color o no puedo hacer que el relleno funcione para separar cada clave en la leyenda.

¿Cómo harías esto?

Fuente

2011-10-24 Davis Dimitriov

Será de gran ayuda si usted pone su ejemplo de trabajo más cercano para que alguien le puede ayudar a encontrar la manera de arreglar eso. – Whetstone

@Whetstone De hecho, estoy más interesado en ver cómo alguien resuelve este problema de la mejor manera que simplemente piratear mi solución hasta que funcione –

No necesita carrozas para este tipo de cosas. Realmente lo que tienes es una lista de pares. Hay un conjunto de etiquetas para que denomina definition list:

<dl> 
    <dt>[blue]</dt> 
    <dd> - LabelA </dd> 

    <dt>[green]</dt> 
    <dd> - LabelB </dd> 

    <dt>[red]</dt> 
    <dd> - LabelC </dd> 
</dl>

Estos son ~~inline~~ block por defecto. Desde allí, puede diseñar los pares de elementos de la siguiente manera:

<style> 
    dl 
    { 
     width: 200px; 
     background: #fff; 
     border: 1px solid #000; 
     padding: 5px 15px; 
     } 

     dt, dd 
     { 
     display: inline; 
     }  
</style>

Fuente

2011-10-24 15:35:44

No, en realidad no lo son. Ellos son 'bloque'.Sin embargo, estoy de acuerdo en que esta es la forma correcta de marcarlo. Solo necesita darse cuenta de que ya sea 'display: inline' o' float: left' será necesario. –

@RyanKinal - Estás en lo cierto. Actualizado. –

No es necesario utilizar divisores flotantes. Prueba este

DIV.LegendItem 
{ 
    display:inline-block; 
    margin-right:20px; 
}

(añadir anchura y la altura, si no tiene contenido DIV)

Lo siento si su texto no se encuentra en la caja también añadir este ...

SPAN.LegendText 
{ 
    display:inline-block; 
    margin-right:20px; 
}

Ejemplo here

Fuente

2011-10-24 15:34:55 musefan

Pruebe usar una mesa pequeña y usar colores de fondo.

<table> 
    <tr> 
    <td style="backgroundcolor:red; width:5px">&nbsp;</td> 
    <td>- Red</td> 
    </tr> 
</table>

Fuente

2011-10-24 15:36:18

Las tablas nunca deben usarse para diseños. –

I sus datos son datos tabulares, entonces este es el mejor enfoque. Si no, entonces debes evitar esto, ya que no es semántico. –

Las tablas no deben usarse para "diseños", pero él no estaba hablando de diseños, solo muestra datos. Lea la pregunta antes de votar abajo. –

la salida de este jsFiddle y ver si esto es lo que busca http://jsfiddle.net/CQXk5/

Fuente

2011-10-24 15:36:20

Aquí hay un ejemplo simple: http://jsfiddle.net/MTB2q/

enter image description here

Fuente

2011-10-24 15:38:59 wsanville

gran ejemplo, muchas gracias –

¡Es un buen ejemplo! – Worker

Esto debería funcionar ...

Flotadores evitados, como mencionó específicamente el navegador cruzado, así que supongo que está al menos t compatible con IE7. IE7 envuelve flotadores de una manera desagradable por lo que sugerí divs en línea.

HTML DOCTYPE

<!doctype html> 
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> 
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline --> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

HTML

<div class="Legend"> 
    <div class="Blue">&nbsp;</div> 
    Blue 
    <div class="Green">&nbsp;</div> 
    Green 
    <div class="Red">&nbsp;</div> 
    Red 
</div>

CSS

.Legend div{ 
    margin-left:15px; 
    width:16px; 
    border:1px solid #808080; 
    display:inline-block; 
} 
.ie7 .Legend div{ 
    display:inline; 
    zoom:1; 
} 
.Red {background-color:red;} 
.Green {background-color:green;} 
.Blue {background-color:blue;}

Fuente

2011-10-24 15:50:08 Andrew

CSS para diseñar la leyenda de claves/valores horizontalmente.

Respuesta

Cuestiones relacionadas