28220 sujets

CSS et mise en forme, CSS3

Espacement intérieur <li>

Bonjour,

je souhaiterais à travers une liste à puce afficher une liste de produits et de prix.

Ainsi, le code serait un classique :

<ul>
<li> nomProduits <span class="right">prixPdts</span>
<li> etc.
</ul>
ou le prix est complètement collé à droite quelque soit la longueur du nom du produit.

Dans mon .right, j'ai juste mis un margin-right:0px; mais apparemment ca ne suffit pas.

Auriez vous une solution alternative ?
Merci pour votre aide.
Bonjour.

Une solution alternatve:


<html>

<head>
<style>

.li {clear:both}
.ul {width:50%}
.left{float:left}
.right{float:right}

</style>

</head>

<body>
<h1>avant</h1>
<div class="ul">
<div class="li"> <span class="left">nomProduits</span> <span class="right">prixPdts</span></div>
<div class="li"> <span class="left">nomProduits</span> <span class="right">prixPdts</span></div>
</div>
<h1>après</h1>
</body>

</html>


C'est une liste en div. Cet exemple fonctionne aussi avec ul et li, mais je ne contrôle pas les puces.
Bonjour Sid et bienvenue sur ce forum Smiley smile

N'oublie pas de fermer tes items de liste par </li> Smiley cligne

Sinon ceci devrait fonctionner mais il y a peut être plus léger

css

li {
positiopn:relative;
}

span {
display:block;
position:absolute;
top:0;
right:0;
}


++
Amha, c'est la soluce à GeorgesM qu'il faut garder. Tu garderas un meilleur contrôle du flux. (ça fait pro hein ?)
Les deux solutions fonctionnent parfaitement ! Merci à vous deux !

Celle de GeorgesM me dérangent un peu car elles fait disparaître les balises ul et li alors que c'est bel et bien ce qui structure aussi mon document.

En quoi controlerais-je mieux mon flux avec sa solution alors que celle de clb56 qui pour moi là est parfaite puisque je garde ma structure ul/li ?
Le problème que j'ai eu avec la solution présentée est le placement des puces.
Si on n'a pas besoin d'afficher les puces, alors pas de problème avec ul et li, mais désactiver les puces.
Modifié par GeorgesM (12 Sep 2005 - 15:40)
J'avais effectivement oublié de préciser plus haut que j'ai bien désactiver les puces avec un list-style-type:none;

Merci !
Sujet clos
Aller à