Style dl et dt avec CSS pour imiter le tableau de présentation comme

J'ai les questions suivantes à l'aide de CSS pour le style de certains dl et dt éléments. Je préfère toujours utiliser très CSS de base qui est compatible avec IE6/IE7 et les navigateurs modernes. Je suis en train d'essayer d'obtenir un effet, qui, pour moi, se doit d'être assez simple à réaliser.

Voici une version allégée de la source initiale de code, je travaille avec, pour essayer de travailler sur cette question:

<!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>

Ici est le résultat visuel. Je stylisé en bleu et en rouge les frontières, de sorte qu'il est plus facile à visualiser:

Mon but est d'avoir tout le bleu et le rouge "boîtes" d'avoir la même largeur quel que soit le texte de taille. E. g. si un utilisateur dispose d'une feuille de style par défaut pour rendre leur texte très grand, il doit développer en conséquence. Ce problème ne concerne pas seulement surviennent lorsque les gens utilisent leur propre feuille de style, il se pose aussi dans IE6, quand les gens sélectionnez "texte-taille" autre que "moyen", cela rend le texte plus large, et je veux être en mesure de répondre à cette.

Je ne pense pas que je veux avoir à définir un dur largeur sur les "boîtes", et je ne veux pas de habillage de texte, ou d'avoir de la flotte de l'automne vers le bas, de cette à deux colonnes de style.

Que je peut modifier la réponse avec plus de photos et d'exemples si je n'étais pas assez claire.

Aussi, c'est une relative, mais elle est distincte de la question. Si la fenêtre du navigateur est re-de taille moyenne, avec un tableau que vous attendez d'une partie de la table de devenir plus visible que vous diminuez la largeur. Avec cette configuration, vous obtenez une très étrange et laid résultat comme ci-dessous. Comment cela peut-il être évité?

Style dl et dt avec CSS pour imiter le tableau de présentation comme

Mise à JOUR

Il semble il n'y a pas une solution qui n'implique pas de donner une largeur fixe pour les éléments (et/ou d'une encapsulation de l'élément). En outre, il semble IE6 texte de redimensionnement ne peut être résolu que par le réglage de votre texte à une taille de pixel et juste ne pas les laisser re-taille.

Pourquoi n'utilisez-vous pas un tableau?
Sémantique des fins, la marque représente une liste de termes et de définitions; pas de données tabulaires. Je veux séparer la sémantique de la marque de style. À ma connaissance c'est le but de la dl élément et de CSS.
Les tableaux ne sont pas fondamentalement mauvais, à éviter à tout prix. Ils sont bons pour l'affichage, de la surprise, de tableaux de données et il ne ressemble à appliquer dans ce cas.
Comme je l'ai dit, "la marque représente une liste de termes et de définitions; pas de données tabulaires." De toute façon, ce n'est pas une réponse, c'est une question. J'ai répondu à la question de savoir pourquoi je ne pas utiliser un tableau, avec une claire et raisonnable de répondre.
Ajouter un attribut width de votre élément dt alors: .termes dt { width:180px; text-align:left; border: solid bleu 1px; clear: left; }

OriginalL'auteur user17753 | 2012-03-08

1

vous pouvez simplement spécifier une largeur fixe:XXpx pour chacun des éléments comme cette

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

Je le prends, il n'y a aucun moyen de le faire sans des largeurs fixes?
tout à largeur variable signifie que vos colonnes ne serait plus de la ligne jusqu'à la verticale, comme ils peuvent s'étirer individuellement, mais vous pouvez utiliser le pourcentage des largeurs comme si ce qui le rend plus facile à utiliser: jsfiddle.net/XKaKT/2

OriginalL'auteur Evert
8

Un DL liste et un correctement balisé tableau à deux colonnes sont en fait assez équivalent à la sémantique. De sorte que vous pouvez utiliser en toute sécurité les tables ici (notez le TH éléments avec la scope attributs):
```
<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>
```
Si vous utilisez DL est préféré, pensez à utiliser une liste non ordonnée avec chaque article contenant un séparée de DL avec exactement un DT/DD groupe à l'intérieur. Voir aussi mon réponse à l' “Est-il un moyen valable pour envelopper un dt et un dd avec un élément HTML?”.

OriginalL'auteur Marat Tanalin
2

A eu un problème similaire et voici une solution, mais elle dépend en grande partie sur chaque DT-DD paire de montage sur 1 ligne, de sorte qu'il peut fragile pour vos besoins:

La stratégie générale ici est que vous voulez que le DL à être un inline-block et le DTs pour les blocs afin qu'ils disposent automatiquement de la même largeur. Cela vous permet également d'aligner à droite tous les DTs si cela convient à votre style, et vous contrôler l'espacement entre les éléments de la DT.
```
dl {
  line-height: 2;
  display: inline-block;
  position: relative;
}

dt {
  text-align: right;
  margin-right: 1em;
}
```
Maintenant, vous avez besoin de la position de la DDs à droite de la DTs, qui est ce qui le rend fragile, parce que les DDs ne peut pas s'adapter aux divers contenus.
```
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
}
```
Noter que le réglage de la largeur des restrictions sur le DL va conduire votre DTs, et votre DDs sont de taille moyenne basé sur votre DTs.

OriginalL'auteur Señor Jefe
1

Pour votre redimensionnement de la fenêtre problème il suffit d'ajouter une largeur à l' ".les termes" div:
```
.terms{
   width:1000px;
 }
```
Je le prends, il n'y a aucun moyen de le faire sans des largeurs fixes?

OriginalL'auteur zgood

Vous devez vous connecter pour publier un commentaire.