[Résolu] Probleme alignement liste a puce sur une seule ligne

Bonjour,

J'ai une exercice a faire et je suis débutante en programmation

Je dois aligner les trois listes sur une même ligne j'ai écris ce code mais je ne comprend pas pourquoi cela ne fonctionne pas ... pouvez vous m'aider ?

sachant qu'il y a également des listes avant et après dans la page que je ne veux pas aligner ...

voila monde code html

<h2> Performances</h2>
<ul>
<li id ="liste1">
<h3>Laugh</h3>
<p>As an adult, come and discover our irresistible clowns, between practical jokes and pranks let yourself be carried away by their joy and fall back into childhood.</p>
</li>

<li id ="liste2">
<h3>Marvel at</h3>
<p>Tame the untameable in the company of our tamers, between roar and razor-sharp claws, watch these fierce felines turn into sweet kittens.</p>
</li>

<li id="liste3">
<h3>Dream</h3>
<p>Let yourself be carried away in a world where the real and the imaginary are one, in the company of our talented magicians, discover a wonderful world limited only by your imagination.</p>
</li>
</ul>
</div>




et mon code css :

#liste1,#liste2,#liste3 {
display: inline-block;
list-style: none;
margin: 10px;
}

Salut

Une solution toute simple, tu enlèves tes display:inline-block de test <li>
et tu met sur ton <ul> un display: flex;

Bonjour,

Déjà la liste en entier c'est le ul, donc vos id sont un peut incohérent.
L'idéal serait d'avoir un
<ul id="list1">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

Votre css peut être de plusieurs façon :

Soit avec du flex :
#list1 { display: flex } #list1 li {margin: 10px;}

soit avec inline-block:
#list1 { font-size: 0:} #list1 li {font-size: 4px;display: inline-block; width: 33.333%; margin: 10px}

soit avec du float:
#list1 { overflow: hidden; } #list1 li { float: left; width: 33.3333%}

normalement ceci devrait fonctionner

voici les différents exemples : https://codepen.io/guillaume-flament/pen/YzzdjGY
Modifié par Gus (18 Nov 2019 - 15:13)

Merci beaucoup à tous les deux ! Ca marche nickel !

rhooo encore un problème ....je cherche depuis 3 jours

En fait.... je souhaiterais superposer le texte que vous m'avez aidé a positionner sur la même ligne avec 3 images de tailles identiques (une derrière chaque li) mais en 2 blocs car je souhaiterais que l'image soit en transparence mais pas le texte qui est au dessus ... et la je dois avouer que ce doit être bien au dessus de mes capacités pour l'instant ...

j’espère que je m'explique correctement...

si vous avez une solution à m'apporter ...

Merci pour votre aide !