visualizzazione e la descrizione in linea

Question

Sto usando un elenco di definizioni per alcuni elementi sulla pagina e bisogno di loro per visualizzare in linea, ad esempio: essi normalmente assomigliare:

< termine def >
        < def disc >
        < def disc >

e ho bisogno di loro a guardare come (notare la multipla del DD):

< termine def > < def disc > < def disc >
< termine def > < def disc > < def desc >
<def.> < def disc > < def disc >

posso farli lavorare bene con i galleggianti in moz ma non importa quello che provo non funzionerà in IE, io di solito ottenere qualcosa di simile:

< def termine > < def disc > < def disc > < def disc > < def disc > < def disc > < def disc >
< termine def >
< termine def >

Qualcuno ha trovato una soluzione a questo problema, mi piacerebbe davvero evitare di aggiungere il markup in più, se possibile, ma a corto di cambiare loro di una lista non ordinata im corto di idee :(

grazie in anticipo

Answer 1

hai provato liberare il galleggiante nei dt? Come questo:

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

---

Edit: Ecco una soluzione cross-browser che convalida:

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> 

Tuttavia, come si può vedere, che br è piuttosto brutto e non semantico. Speriamo che qualcun altro possa trovare una soluzione migliore.:)

Answer 2

predefinita foglio di stile

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

cioè 6 & 7 stylesheet:

dt {float: none;} dd { position: relative; superiore: -19px;/a seconda della line-height/ }

IE6

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

Speranza che aiuta.

Answer 3

solo give them all layout, il modo più semplice è utilizzare la proprietà CSS .yourstuff { zoom: 1; }

Answer 4

questo funziona (certamente testato solo su FF 3.xx e Opera 9.x, sia su 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> 

Collegamento all'esempio di lavoro, testato con FF 3 e Opera 9.x:
http://www.davidrhysthomas.co.uk/so/dls.html

Answer 5

Nota: si deve evitare spazi tra gli elementi DD per questo lavoro il lavoro correttamente.

Non c'è bisogno di hack per 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; 
} 

Se non è necessario sostenere IE8, saltare la regola CSS 4 ° e basta usare questo selettore per il 3 ° uno: dt:not(:first-child):before

Il risultato dovrebbe essere qualcosa di simile: (demo)

DT DD DD 
DT DD DD 

Se vuoi essere reali freddo, è possibile rep pizzo la seconda regola con questo:

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

dt:after { 
    content: ':'; 
} 

Il risultato dovrebbe essere qualcosa di simile: (demo)

DT: DD, DD 
DT: DD, DD