Styling dl e dt con CSS per simulare la presentazione simile a una tabella

Ho i seguenti problemi utilizzando CSS per disegnare alcuni elementi dl e dt. Preferisco sempre usare CSS di base che sia compatibile con IE6/IE7 e browser moderni. Sto cercando di ottenere un effetto, che per me dovrebbe essere piuttosto semplice da raggiungere.Styling dl e dt con CSS per simulare la presentazione simile a una tabella

Ecco una versione ridotta del codice sorgente iniziale sto lavorando con, per cercare di lavorare proprio su questo tema:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 

     <style type="text/css"> 

     .terms dl { 
      float: left; 
      padding-left: 0px; 
     } 

     .terms dt, .terms dd { 
      text-align: center; 
      margin: 0px; 
      float: left; 
     } 

     .terms dt { 

      border: solid blue 1px; 
      clear: left;  
     } 

     .terms dd { 
      border: solid red 1px; 
      margin-right: 40px; 
      margin-left: 40px; 
     } 

     </style> 
    </head> 
    <body> 
     <div class="terms"> 
      <h1>Terms</h1> 
      <dl> 
       <dt>Term 1:</dt> 
       <dd>Very Long definition for this term here</dd> 

       <dt>Term 2:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 3 with longer term title:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 4:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 5:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 6:</dt> 
       <dd>Definition for term</dd> 
      </dl> 
      <dl> 
       <dt>Term 7:</dt> 
       <dd>Defintion for term</dd> 

       <dt>Term 8:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 9:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 10:</dt> 
       <dd>Very Long definition for this term here</dd> 

       <dt>Term 11:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 12:</dt> 
       <dd>Definition for term</dd> 
      </dl> 
     </div> 
    </body> 
</html>

Ecco il risultato visivo. I Styled bordi blu e rosso in modo che sia più facilmente visualizzato:

enter image description here

Il mio obiettivo è quello di avere tutte le "scatole" blu e rosso per avere la stessa larghezza non importa quale sia l'insieme del testo-size è . Per esempio. se un utente ha un foglio di stile predefinito per rendere il proprio testo molto grande, dovrebbe espandersi di conseguenza. Questo problema non si verifica solo quando le persone usano il proprio foglio di stile, ma si pone anche in IE6 quando le persone selezionano "dimensioni del testo" diverse da "medie" - rende il testo più grande e voglio essere in grado di soddisfarlo.

Non penso di voler impostare una larghezza rigida su nessuna delle "caselle", e non voglio alcun involucro di testo, o avere i float cadere, fuori da questo stile a due colonne .

Posso modificare la risposta con più immagini ed esempi se non sono stato abbastanza chiaro.

Inoltre, questa è una domanda correlata, ma separata. Se la finestra del browser viene ridimensionata, con una tabella ci si aspetterebbe che una parte della tabella diventi non più visibile mentre si riduce la larghezza. Con questa configurazione, si ottiene un risultato molto strano e brutto come visto di seguito. Come può essere evitato?

enter image description here

UPDATE

Sembra che non v'è una soluzione che non comporta dando larghezza fissa di agli elementi (e/o un elemento di incapsulamento). Inoltre, sembra che il ridimensionamento del testo di IE6 possa essere risolto solo impostando il testo su una dimensione in pixel e non permettendogli di ridimensionarlo.

fonte

2012-03-08 user17753

Perché non usi un tavolo allora? – zgood

Scopo semantico, il mark-up rappresenta un elenco di termini e definizioni; dati non tabulari. Voglio separare la semantica del mark-up dallo stile. A mia conoscenza, questo è lo scopo dell'elemento 'dl' e del CSS. – user17753

Le tabelle non sono intrinsecamente malvagie, da evitare a tutti i costi. Sono utili per la visualizzazione, la sorpresa, i dati tabulari - e sembra che si applicherebbe in questo caso. – chris

si può solo specificare larghezza fissa: XXpx per ognuno degli elementi come questo

http://jsfiddle.net/XKaKT/1/

fonte

2012-03-08 15:19:19 Evert

Lo prendo, non c'è modo di farlo senza una larghezza fissa? – user17753

qualsiasi larghezza variabile significherebbe che le colonne non si allineano più verticalmente, poiché potrebbero allungarsi individualmente, ma è possibile utilizzare larghezze percentuali come questa se ciò lo rende più utilizzabile: http://jsfiddle.net/XKaKT/2/ – Evert

Per la vostra finestra di ridimensionamento problema è sufficiente aggiungere una larghezza al div ".Condizioni":

.terms{ 
    width:1000px; 
}

fonte

2012-03-08 15:09:27 zgood

Lo prendo, non c'è modo di farlo senza larghezze fisse? – user17753

Un elenco DL e un correttamente contrassegnati tabella a due colonne sono in realtà abbastanza equivalenti per quanto riguarda la semantica. Quindi si può tranquillamente utilizzare le tabelle qui (notare i TH elementi con i scope attributi):

<table> 
    <tr> 
     <th scope="row">Term 1:</th> 
     <td>Very Long definition for this term here<td> 
    </tr> 
    <tr> 
     <th scope="row">Term 2:</th> 
     <td>Definition for term<td> 
    </tr> 
    <tr> 
     <th scope="row">Term 3 with longer term title:</th> 
     <td>Definition for term<td> 
    </tr> 
    <!-- ... --> 
</table>

Se si utilizza DL è preferito, considerare l'utilizzo di una lista non ordinata con ogni elemento contenente una separate DL con esattamente un DT/DD gruppo dentro

fonte

2012-03-08 16:33:48

avuto un problema simile ed ecco una soluzione, ma dipende in gran parte ogni coppia DT-DD raccordo sul solo 1 riga, quindi potrebbe fragile per i vostri scopi:

La strategia generale qui è che si desidera il DL essere un blocco inline e i DT devono essere blocchi in modo che abbiano automaticamente la stessa larghezza. Ciò consente anche di allineare a destra tutti i DT se ciò si adatta al tuo stile e tu controlli la spaziatura tra gli elementi dal DT.

dl { 
    line-height: 2; 
    display: inline-block; 
    position: relative; 
} 

dt { 
    text-align: right; 
    margin-right: 1em; 
}

Ora è necessario posizionare i DD a destra del DTS, che è ciò che rende questo fragili, perché il DD non può adattarsi bene a diversi contenuti.

dd { 
    position: absolute; 
    left: 100%; 
    margin-top: -2em; /* negate the DL line-height */ 
    white-space: nowrap; /* without this, DDs will be the same length as DTs 
}

noti che l'impostazione di larghezza restrizioni sul DL guideranno le vostre DTS e DD tuoi sono dimensionate in base alle vostre DTS.

fonte

2012-06-13 23:13:44

Styling dl e dt con CSS per simulare la presentazione simile a una tabella

risposta

Problemi correlati