Je pensais que ce serait une chose facile, mais je n'ai pas trouvé une bonne solution (peut-être que j'utilise aussi les mauvais termes de recherche).Modélisez une liste ordonnée pour que le numéro apparaisse aligné à gauche et au-dessus de l'élément?
Je voudrais le style d'une liste ordonnée de sorte que les éléments apparaissent alors:
article un
article deux
Ite m trois
Y at-il un moyen de le faire simplement avec CSS?
Merci beaucoup d'avance!
Vous pouvez utiliser la propriété content avec le :before pseudo-élément et la \a évasion newline:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OL Test</title>
<style type="text/css">
li:before {
content: "\a";
white-space: pre;
}
</style>
</head>
<body>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
</body>
</html>
Cela devrait fonctionner correctement sur bro wsers qui supportent CSS 2.1.
AFAIK, CSS does not allow you to have a lot of control en ce qui concerne la position de la liste point par rapport à la « balle » (ou numéro ou autre) ... Donc il pourrait être une meilleure idée de générer les numéros directement dans le code HTML, sur le serveur -side, ou côté client via Javascript ...
Néanmoins, les travaux suivants (au moins dans Firefox), mais est plutôt laid (avec qui br au milieu: - /)
<html>
<head>
<style type="text/css">
li > p{
margin-left:-30px;
margin-top:-10px;
}
</style>
</head>
<body>
<ol>
<li><br/><p>item 1</p></li>
<li><br/><p>item 2</p></li>
</ol>
</body>
</html>
L'idée est de forcer la con tente de la liste-article à être sur une autre ligne avec un br, puis, sur le contenu, appliquer des marges négatives pour le déplacer où vous voulez ... Ce n'est certainement pas une bonne solution ... en outre, je pense que chaque navigateur peut générer le "list-index" dans son chemin, donc il n'y aurait pas de bonne façon de le faire fonctionner sur tous les navigateurs ...
Vous pouvez le long de la ligne de:
<style>
ol {
list-style-position: inside;
padding-left: 0;
}
</style>
<ol>
<li> <div>foobar</div></li>
<li> <div>wah la</div></li>
</ol>
Il fonctionne sur FF et Chrome, mais je ne pas IE sur ma machine actuelle d'essayer.
Faut-il absolument une liste ordonnée? Si vous générez dynamiquement le contenu, vous pouvez toujours générer vous-même les nombres, puis formater le balisage comme vous le souhaitez. Plutôt que d'essayer de forcer le navigateur en faisant quelque chose d'intelligent, simplifiez la situation en faisant quelque chose 'smart'
Je sais que cette question est vraiment ancienne, mais j'ai fini par la trouver en cherchant la même réponse, et ces réponses fournies n'ont pas vraiment fait ce que j'avais besoin de faire.J'avais aussi appris cette technique vraiment cool en utilisant le "compteur" en CSS.
Votre CSS ressemblerait à quelque chose comme ceci:
ol {
list-style: none; /* Remove default numbers */
counter-reset: item;
}
ol li {
counter-increment: item;
}
ol li:before {
content: counter(item); /* Add the numbers as content in the before pseudo */
/* Continue styling as needed, changing, fonts, position, etc. */
display: block;
}
Merci pour toutes les réponses incroyablement rapides et utiles, j'ai opté pour cette solution car elle a permis l'élément de liste soit propre de tout sauf le contenu prévu. Cela fonctionne parfaitement pour moi dans Chrome/Firefox. Hélas, n'ont pas encore testé IE. (rapportera quand je fais) – waffl