Images légendées inline

bonjour

Je débute en HTML

j'ai 3 images im1,im2,im3 que je veux légender par leg1,leg2,leg3 lesquelles sont des liens vers l1,l2,l3
donc à la base

Code:

---

<a href='"l1"> <img src="im1"> </a>

---

mais je veux tout ça sur la même ligne.

C'est sans doute idiot mais je n'arrive qu'à les avoir l'une en dessous de l'autre.
J'ai essayé avec figure pour bénéficier de figcaption (mais je crois que c'est un bloc donc ça occupe toute la ligne si je ne me trompe)

j'ai essayé avec legend ça ne marche pas non plus.

Je pourrais mettre ça dans un tableau mais c'est débile; il doit bien y avoir un moyen de mettre plusieurs image légendées sur une même ligne.


Merci

Bonjour et bienvenue sur DVP.

Citation:

---

mais je veux tout ça sur la même ligne

---

ou

Citation:

---

mais je n'arrive qu'à les avoir l'une en dessous de l'autre.

---

entre les deux laquelle il te faut ?

Citation:

---

mais je crois que c'est un bloc donc ça occupe toute la ligne si je ne me trompe

---

c'est effectivement un élément de type bloc mais tu peux changer cet état.

Citation:

---

il doit bien y avoir un moyen de mettre plusieurs image légendées sur une même ligne.

---

serait cela le vrai but, dans ce cas tu peux utiliser un Flexible Box Layout par exemple.

Ressources :

• L'élément HTML <figure>
• The figure element
• Disposition des boîtes flexibles CSS(attention cela peut prendre la tête mais au final l'utilisation basique reste simple)

En fait je suis tombé par le plus pur effet du hasard sur la réponse (dans un forum, réponse à une question n'ayant aucun rapport):

Il suffit de mettre en CSS

Code:

---

1 2	figure{display:inline-block;} body{text-align:center;}

---

pour avoir exactement ce que je voulais.
Ce qui m'a induit en erreur c'est l'affirmation péremptoire que c'était un block occupant la ligne.
Le site développer-mozilla que j'utilise le plus souvent parce qu'il me semble assez complet de dit rien d'un quelconque style par défaut à la différence de "alsacreation" qui met bien
Style par défaut :

Code:

---

figure { display:block; margin: 1em 40px; }

---

ce qui m'aurait mit sur la piste, sauf que ce site est excessivement parcellaire et ne fournit de tuto que sur quelques éléments.
Mais du coup la discussion se translate vers la question :

Où puis-je trouver quelque chose de complet qui explique simplement à un néophyte ce qui est faisable à partir d'un couple de balise?

Merci