Forum : Problème de <li>

Salut.

Le code en soi est bon, c'est juste qu'il est préférable de séparer l'html du css (Ou au moins le mettre dans le <head>).
Ta portion de code est l'exemple même de ce qu'il ne faut pas faire, pourquoi répéter le inline à chaque <li>? Alors qu'un simple li { display: inline; } aurait suffit:

Garance Tosello

Auteur

Merci pour ta réponse ca me rassure !!
Comment puis-je faire ?

<style>
li.{display: inline;
</style>

???
Et encore une, tu seras comment je pourrais mettre une "puce" à côté des mots ?

dEXTER1

Salut !
Le code ça va mais par contre c'est affreux de mélanger html et css et ça ne se fait absolument plus.
Tu peux créer un fichier css que tu appelles dans ta page HTML pour plus de clarté :)

Garance Tosello

Auteur

Dexter, ok quel code je mets car j'ai essayé avant de passer à cette solution de "mélange" !!
le code serait - il celui ci ?

<style>
li.{display: inline;
}
</style>

En plus il me faut de l'espace entre les 2 textes

MisterOccan

Le code css à mettre dans le <head> ou dans un fichier à part (C'est la meilleure façon de faire).

<style>
    ul { text-align: center; }
    li { display: inline; }
</style>

Pour les puces, c'est un poil plus compliqué dans ton cas (Enfin compliqué est un bien grand mot :D).

Pour la théorique, sache que c'est la propriété display: list-item qui fait que les puces sont affichées, alors il est logique que ces dernières disparaissent une fois la proprité display changée (En inline dans ton cas).

Ils existe plusieurs solutions pour contourner ça, on va en voir 2:

Manière pas très pratique, mettre les li en float.
```
ul { 
float: auto;
text-align: center;
}
li { float: left; }
```
L'avantage est qu'on aura les puces par défaut.
Manière plus modulable, utiliser le pseudo-élément :before.
```
ul { text-align: center; }
li { display: inline; }
li:before { content: '*'; }
```
L'avantage ici est qu'on pourra appliquer n'importe quelle puce personalisée (Caractère, texte, image.....)

Garance Tosello

Auteur

Merci beaucoup pour toutes tes explications car j'ai tout compris et ca marche !!
Merci merci merci merci

Garance Tosello

Auteur

Je ne sais pas si tu vas voir ce message mais j'ai un HIC
Car j'ai des <li> verticales qui maintenant s'affichent en horizontales.
Comment puis-je dissocier les 2 ?
Car <li-xx> c'est pas possible non ?

MisterOccan

Pourrais-tu être plus clair? Montre-nous ton code (Tu peux passer par Codepen si tu le souhaite).

Garance Tosello

Auteur

c'est bon j'ai trouvé la solution. Merci en tout cas.

Amstramgram

Juste comme ca au passage. Le code donné n'est pas juste. <\u> est pour underline.
La structure d'une liste c'est :

<ul>
    <li></li>
    <li></li>
</ul>

;)

Et le truc le plus simple pour faire ce que tu veux faire c'est ca :

<div>
<p>A4  : <b>8&euro;</b>, A3 : <b>10&euro;</b> </p>
</div>

Et si tu veux vraiment séparer les deux éléments.

<div>
<p><span>A4  : <b>8&euro;</b></span><span> A3 : <b>10&euro;</b></span></p>
</div>

Garance Tosello

Auteur

Merci pour ta réponse
On m'a dit que les <span> était obsolète ?

Amstramgram

Les <\ul> sont indispensable pour une liste non-ordonée. <\ol> pour une liste ou l'ordre à une importance.

Le <\u> et <\center> quand a eux sont par contre obsolète. Pour souligner un texte sans apporter un sens différent, il faut utiliser l'élément <\span> ou un autre élément adapté et le mettre en forme avec la propriété CSS text-decoration: underline;, même chose pour le center, utiliser l'élément parent et mettre un text-align: center;

Anthoo

"Tu peux ne pas utiliser les <\ul> si tu as <\nav> autour dans le cas d'un menu par exemple."

Euh, à moins que je comprenne mal le sens de cette phrase, non, un élément nav ne remplace pas une liste ul.

Yumi

<ul>
    <li></li>
    <li></li>
    <li></li>
 </ul>

ul li {
   display:inline;
   list-style-type:none;
}

Ca me parait le plus simple pour se faire.

A mettre dans un <style> dans le head ou dans un fichier a part et a integrer au html avec link. Pour en ligne tu peux egalement utiliser inline-block qui te parmettra d'eviter de passer par le margin-left pour espacer tes li sur une ligne afin quils ne soiient pas tous colle les uns aux autres.

Problème de <li>

14 réponses