Display término definido y en línea

Question

estoy usando una lista de definiciones para algunos elementos de la página y los necesito para mostrar en línea, por ejemplo, descripción: que normalmente aspecto:

< término def >
        < def desc >
        < def desc >

y necesito que se vean como (nota del múltiple DD):

< término def > < def desc > < def desc >
< término def > < def desc > < def desc >
< def term > < desc def > < def desc >

puedo llegar a trabajar muy bien usar flotadores en MOZ pero no importa lo que intento no van a trabajar en el IE, normalmente conseguir algo como:

< def término > < def desc > < def desc > < def desc > < def desc > < def desc > < def desc >
< término def >
< término def >

Alguien ha encontrado una solución a este problema, me gustaría evitar añadir marcado adicional donde sea posible, pero menos que cambiar a una lista no ordenada im sin ideas :(

gracias de antemano

Answer 1

¿usted ha intentado limpiando el flotador en el dt? De esta manera:

dt { clear: left; } 
dd { float: left; } 

---

Editar: Aquí es una solución multi-navegador que valida:

dd,dt{ display: inline; } 

<dl> 
<dt>1</dt><dd>1.1</dd><dd>1.2<br/></dd> 
<dt>2</dt><dd>2.1</dd><dd>2.2<br/></dd> 
</dl> 

Sin embargo, como se puede ver, que ancho es bastante desagradable y no semántico. Con suerte, alguien más puede encontrar una mejor solución.:)

Answer 2

de estilo por defecto

dt, dd {float: left;}
dd + dt {clear: left; }

es decir 6 & 7 hoja de estilo:

dt {float: none;} dd { posición: relative; arriba: -19px;/dependiendo de su line-height/ }

IE6

http://code.google.com/p/ie7-js/

Espero que ayude.

Answer 3

solo give them all layout, la forma más simple es usar la propiedad CSS .susumento { zoom: 1; }

Answer 4

esto funciona (la verdad única prueba en 3.xx FF y Opera 9.x, tanto en Ubuntu 8.04):

CSS:

p { 
    display: block; 
} 
dl { 
    display: block; 
    margin: 0; 
} 
dt { 
    display: block; 
    width: 7em; 
    border-right: 1px solid #ccc; 
    margin: 0; 
} 
dd { 
    display: none; 
    margin: 0; 
    position: relative; 
    /* 'position: absolute' would probably work better, 
     and lose the line break left by the 'position: relative;' */ 
    top: -1em; 
    left: 8em; 
} 
dt:hover + dd, dt:hover + dd + dd { 
    /* Couldn't find a way to target all sibling 
     dds of a dt without the + operator (and listing all of them), 
     but it works, albeit kludgy */ 
    display: inline; 
} 
dd:after { 
    content:"; "; 
} 
dd:last-child:after { 
    content:""; 
} 

HTML:

<div id="content"> 
    <dl> 
     <dt>first dt</dt><dd>first dt's first dd</dd><dd>first dt's second</dd> 
     <dt>second dt</dt><dd>second dt's first dd</dd><dd>second dt's second</dd> 
     <dt>third dt</dt><dd>third dt's third dd</dd><dd>third dt's second</dd> 
    </dl> 
</div> 

Enlace al ejemplo de trabajo, probado bajo FF 3 y Opera 9.x:
http://www.davidrhysthomas.co.uk/so/dls.html

Answer 5

Nota: hay que evitar espacios entre los elementos DD para este trabajo el trabajo correctamente.

No hay necesidad de hacks para IE8 +:

dd, 
dt{ 
    display: inline; 
    margin: 0; 
} 
dd:before { 
    content: ' '; /* space them */ 
} 
dt:before { /* insert line break before <dt> */ 
    content:"\A"; 
    white-space:pre; 
} 
dt:first-child:before { /* disable line break before the first <dt> */ 
    content: none; 
} 

Si no es necesario para apoyar IE8, no tome la regla CSS cuarto y sólo tiene que utilizar este selector para la tercera uno: dt:not(:first-child):before

El resultado debe ser algo como esto: (demo)

DT DD DD 
DT DD DD 

Si quieres ser verdadero fresco, puede rep ata la segunda regla con esto:

dd + dd:before { 
    content: ', '; /* add comma between definitions */ 
} 

dt:after { 
    content: ':'; 
} 

El resultado debe ser algo como esto: (demo)

DT: DD, DD 
DT: DD, DD