Html : mise en page de paragraphes et sous paragraphe (débutant)

Programmation
#1

Bonsoir.

Excusez moi, c’est une simple question de mise en page via css pour un html que je n’arrive pas à trouver sur la toile. Je suis débutant et je ne m’en sort plus dans mes recherche.

C’est pour le retour à la liste d’un point d’une liste qu’il faudrait amener à ce qu’il se poste au niveau du début du texte et non pas de l’attribut du point. Ouaich charabia quoi … vais tenter …

Voici:
Mon css indique sur une ligne ceci:

.List {margin-left: 5em; margin-right: 6em; list-style-type: none;}

Mon html est comme suit:

<ul>
<li> "ATTRIBUS-DU-POINT-DE-LA-LISTE"  :  Définition plus ou moins longue de l'attribut cité juste précédement. <li>
<ul>

Ce que j’aimerais et n’arrive pas à faire et dieu sait que j’ai essayé plein de trucs différent:
Que le retour à la ligne de la définition si il en existe du à la longueur de celle-ci, revienne non pas en dessous du « A… » de ATTRIBUS mais soit décalé sur la droite et se positionne en dessous du « D… » de définition.

J’ai pas su juste faire cela. ça ne doit pas être grand chose mais à mon avis je m’y prend mal…

Peut-on définir dans le css : une puce de liste qui correspondrait à une chaine de caractère définie dans le html ?
(juste déjà avec ça je me suis éparpiller dans moulte nouvelles pseudo-solutions)

Mercii
(ça fait juste des heures pour ce petit point juste esthétique :upside_down_face: )

#2

Salut,

La dernière Doc que j’ai lu sur le sujet était sur le css3,

Aujourd’hui ce serait du css4,

Pour ce que vaut cette référence :face_with_raised_eyebrow:,

J’aurais tendance à tester align, text-ident et list-prop.

#3

Aaaah mais Ouiiii
J’avais pas songé !! merci … vais faire un tour de se coté. Mercii !!

#4

Grave … je suis arrivé à faire un truc comme je le désirais
faut voir si à terme ça tient la route.
Voici le lien qui m’a aiguillé sous les conseille de pan547 que je remercie:
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Box_Alignment

Alors dans mon css se retrouve :

.LiBox {
  margin-left: 8em; margin-right: 6em;
  display: grid;
  grid-template-columns: 4em 42em;
  align-items: start;
}

et dans mon html:

<div class="LiBox">AA</span> &ensp;: </div><div> Définition plus ou moins longue de l’attribut cité juste précédement. Ici, dans cette exemple que je veux extraordinairement long c'est la définition de "AA" ... (...) Voilàààà point !!!</div></div>

Grosso modo:
ça nous donne un
AA suivit de deux espaces … suivit du double point … Là commence la définition qui quand elle revient à la ligne, comme voulu… se cale sur le début le premier caractère de la définition et non le premier A de AA …

Grand merci.
Je m’était réellement engouffrer dans des montagne de trucs …

Now… ça marche avec un deux lettre…
faudrat à mon avis si plus de deux lettres comme un AAAA,
modifié cette ligne dans le css:

grid-template-columns: 4em 42em;

Le 4 en un chiffre suppérieur à 4

Y a a mon sens plus simle et moyen de bien paufiné le bazar mais cela me suffit our le moment !

a++