Je vous écris parce que je bloque sur quelque chose qui ne doit pas être bien compliqué, mais je ne trouve pas la solution sur le net :
J'aimerais écrire un petit texte, et à côté de celui-ci, mettre une liste dont le premier élément serait aligné horizontalement avec le texte et les autres éléments seraient alignés verticalement avec le premier de la liste, même si une ligne du texte est longue (dans ce cas, j'aimerais passer à la ligne et aligner verticalement la deuxième ligne du texte avec celle d'au-dessus).
Le problème rencontré est qu'avec peu de texte dans ma liste, mon texte s'aligne horizontalement par défaut avec le dernier élément de la liste, et que quand la ligne de la liste est longue, toute la liste passe à la ligne. J'ai essayé avec "vertical-align:top", ça ne donne pas ce que je veux non plus. Voici mon code HTML et merci pour votre aide !
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="display:inline-block; "> 2021</div>
<ul style="list-style : disc;display:inline-block">
<li>petit texte</li>
<li>Un texte un petit peu plus long pour tester ce qu'il se passe quand la fenêtre est trop petite</li>
</ul><br>
</body>
</html>
- Edité par JonathanGraff1 13 octobre 2021 à 12:47:41
Bonjour, alors pour mettre du code il y a un boutton pour ca, essaie d'editer ton message ensuite pour faire ce que tu essaies de faire sa se fait assez rapidement avec flexbox.
tu as une div container, dans cette div tu auras une div ou une balise de type block avec ton texte à l'intérieur et en dessous de la div avec ton texte, tu auras ton ul ensuite en utilisant display:flex sur le container tu auras normalement le resultat que tu attends
Et ps mettre le css dans un fichier css aide a la lecture quand la page deviendra plus importante, je supposes que là c'était juste pour le test
Voilà, c'est édité, et oui le style est à part, c'est juste pour le test que j'ai fait comme ça. Je vais essayer ce que tu me dis avec display:flex . Merci !
Edit : Super, ça marche nickel ! (en rajoutant la margin-top à 0 sinon la liste est décalée). Je vais aller (re)lire la doc de flex pour comprendre pourquoi maintenant
Merci beaucoup !
- Edité par JonathanGraff1 13 octobre 2021 à 12:58:03
Super et oui il y a un site pour s'entrainer a utiliser flexbox avec grid les deux sont importants.
yasakani no magatama
Aligner une liste à droite d'un texte
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
yasakani no magatama
yasakani no magatama