2010-05-17 3 views
0

CSS:Définition ne se présente pas

.about dt { 
list-style-type:none; 
font-weight:bold; 

} 
.about dd { 
list-style-type: disc; 
list-style-position: outside; 
margin-left: 0px; 
padding-left: 30px; 
} 

Et le code html

<dl class="about"> 
    <dt>Current topics and titles </dt> 
    <dd>Fulfilling community residents&rsquo; appetite for information about 
    popular cultural and social trends and their desires for satisfying 
    recreational experiences</dd> 
... 

Je veux un disque avant le DD, mais il ne se présente pas dans Chrome ou IE. Des idées de ce que j'ai mal fait? Merci!

Répondre

2

Vous pouvez également utiliser le :before pseudo-élément CSS pour insérer le caractère de balle juste avant chaque <dd> ou utiliser un arrière-plan image avec une balle qui permettrait également multi-navigateur que: avant ne sont pas pris en charge dans tous les navigateurs.

1

Je crois que le list-style-type est destiné, bien, ul/ol/li (listes). et non des étiquettes de définition.

Vous devez réécrire votre syntaxe pour utiliser une liste, ou peut-être ajouter &bull; (•) en face des définitions.

+0

droit que vous êtes. Merci! Le seul inconvénient d'ajouter le taureau est que je ne serais pas en mesure d'avoir facilement dupliquer 'positions liste de style: extérieur,' ... Eh bien, vous ne pouvez pas tout avoir, où iriez-vous dire? – aslum

+0

Je voudrais juste mettre comme la première chose dans la balise ''

. Vous pourriez être en mesure d'écrire un peu de javascript pour aller ajouter tous les points de balle, mais pour la plupart, si vous voulez une option CSS, vous devez utiliser une liste. –

1

Je suis d'accord avec Stagas, utilisez une image de fond sur la <dd> de votre définition. liste. Vous ne voulez pas ajouter de caractères spéciaux au marquage lui-même ... rappelez-vous, gardez le contenu séparé de la présentation. Les pseudo-éléments ne vont pas rendre dans IE 7 et plus tôt.

1

Voici une démonstration de l'approche stagas:

http://jsfiddle.net/snifty/eLXyu/1/

.about dt:before { 
    content: "\25CF"; 
    font-size:x-large; 
    color:maroon;  
} 

.about dt { 
    font-weight:bold; 
} 
.about dd { 
    margin-left: 0px; 
    padding-left: 30px; 
} 

J'ai utilisé un caractère Unicode particulier pour émuler le disque. Les pseudo-éléments sont way fun.

Questions connexes