Je <dl>, et ne peut pas le style à ressembler à ceci:Comment styliser <dl> comme montré dans l'image?
Est-il possible de style une liste de définitions comme ça? Ou peut-être, une meilleure idée serait une table?
Bien sûr, vous pouvez aller avec quelque chose comme ça (biensur avec votre CSS à partir d'une source externe):
<style type="text/css">
dt {
width: 200px;
float: left;
clear: left;
}
</style>
<dl>
<dt>Test:</dt>
<dd>Hallo, this is a test</dd>
<dt>Test:</dt>
<dd>Hallo</dd>
<dt>Test:</dt>
<dd>Hallo</dd>
</dl>
D4V360 était presque là. Cette variante traitera des entrées plus longues qui tombent sur sur les lignes suivantes (comme l'exemple dans l'image liée):
<style type="text/css">
dt {
width: 200px;
float: left;
clear: left;
}
dd { margin-left: 200px; }
</style>
<dl>
<dt>First Item</dt>
<dd>This is the first item</dd>
<dt>Second Item</dt>
<dd>This is the second item</dd>
<dt>Third Item</dt>
<dd>Lorem ipsum dolor sit amet... lots more text here...</dd>
<dt>Fourth Item</dt>
<dd>Last item</dd>
</dl>
Notez que la valeur margin-left pour l'élément dd doit être la même que la valeur width de l'élément dt . C'est ce qui provoque les lignes suivantes pour les entrées plus longues à partir du bon point. Ajustez les deux valeurs ensemble pour atteindre l'espacement désiré.
Je n'ai vu cela que lorsque j'étais sur le point de cliquer sur "Publiez votre réponse". C'est correct. Il semble même fonctionner avec d'autres éléments flottants autour. IE6 a quelques problèmes de marge comme d'habitude. –
Ouais, je ne me préoccupe pas des problèmes IE6 ces jours-ci à moins que ce ne soit spécifiquement demandé. Dans ce cas, je suppose que la feuille de style weirdo conditionnellement incluse d'habitude peut être utilisée :) –
Presque OK, mais maintenant ça ressemble à ça: http://img32.imageshack.us/img32/7740/nowlook.png - comparez cette image avec le premier. – DJPython
Cela fonctionne essentiellement:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head><title></title>
<style type="text/css"><!--
dt{
border: 1px solid green;
float: left;
clear: left;
width: 200px;
margin: 0 0 10px 0;
padding: 0;
}
dd{
border: 1px solid red;
margin: 10px 0 10px 210px;
padding: 0;
}
--></style>
</head>
<body>
<dl>
<dt>Praesent dapibus posuere nulla:</dt>
<dd>Eu varius lorem fringilla a.</dd>
<dt>Integer id magna ut orci condimentum:</dt>
<dd>Quisque pulvinar purus quis nibh luctus fermentum.</dd>
<dd>Donec pretium quam id quam bibendum quis blandit tellus blandit.</dd>
<dd>Vestibulum dignissim nunc et felis luctus dictum.</li>
<dt>Cras nec nisl in libero:</dt>
<dd>Vulputate dignissim a commodo ligula.</dd>
<dt>Integer ut orci vitae lectus eleifend mattis:</dt>
<dd>Suspendisse ut lorem diam, vel pharetra urna. Vestibulum ultricies, magna at placerat lacinia, nibh mauris pharetra risus, et imperdiet arcu elit sit amet arcu. Sed enim turpis, sodales non facilisis sed, mollis sed quam. Integer quam neque, dapibus et viverra sed, pulvinar vitae odio. Vestibulum hendrerit pellentesque tortor a facilisis.</dd>
</dl>
</body>
</html>
Il déclenche l'Double Margin Float Bug dans IE6, cependant.
Cela aura l'air drôle s'il y a plus de 1 'dd' par' dt'. Pour le réparer, vous pouvez ajouter une autre règle CSS 'dd {margin-left: 200px;}' – naivists
@naivists: Cela sera également nécessaire pour traiter les objets plus longs qui tombent sur les lignes suivantes. Vous verrez que j'ai ajouté cela comme faisant partie de ma réponse avant votre commentaire :) –