0
votes

Comment déplacer la ligne de texte vers le haut de <div>

En ce qui concerne l'étape 1 illustrée par l'image, comment puis-je déplacer la première ligne vers le haut "Mon premier élément", de sorte que la ligne suivante se trouve juste en dessous (comme vous pouvez le voir à droite)?

Codepen

Merci

HTML

div.list {
  counter-reset: list-number;
}
div.list div:before {
  counter-increment: list-number;
  content: counter(list-number);
  
  margin-right: 10px;
  margin-bottom:10px;
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  font-size:16px;
  background-color:#d7385e;
  border-radius:50%;
  color:#fff;
}

 div.list div {
   color: purple;
 }

CSS

<div class="list">
    <div>My first item <br>
      My first item continued
    </div>
    <br>
    <div>My second item</div>
    <br>
    <div>My third item</div>
</div>

html css

4 commentaires

Les listes numérotées doivent être <ol><li> , pas <div> . Pourquoi utilisez-vous <div> ?

Astuce: les pseudo-éléments ont des préfixes doubles-virgules, par exemple div::before , pas div:before . Les navigateurs accepteront les virgules simples pour :before et :after mais c'est pour la compatibilité descendante - vous devriez donc changer votre CSS pour utiliser ::before .

add float: left to pseudo element

@Dai flexbox / CSS grid ou toute autre technique ne peut pas obtenir du texte flottant autour de l'élément comme indiqué dans sa deuxième capture d'écran, donc float est la seule solution pour le comportement flottant . Float ne mourra jamais et ne devrait jamais mourir car il peut réaliser des choses que vous ne pourrez jamais faire avec flexbox ou CSS grid.

4 Réponses :

0
votes

Il serait peut-être préférable de changer la structure de votre HTML pour quelque chose comme ça, mais voici une solution avec seulement changer le CSS.

Ajouter un display: flex; à votre div.list div

<div class="list">
  <div>My first item <br> My first item continued
  </div>
  <br>
  <div>My second item</div>
  <br>
  <div>My third item</div>
</div>

div.list {
  counter-reset: list-number;
}

div.list div::before {
  counter-increment: list-number;
  content: counter(list-number);
  margin-right: 10px;
  margin-bottom: 10px;
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #d7385e;
  border-radius: 50%;
  color: #fff;
}

div.list div {
  color: purple;
  display: flex;
}

0 commentaires

0
votes

Ajoutez simplement l' display:flex propriété flexbox display:flex

<div class="list">
  <div>My first item <br> My first item continued</div>
  <div>My second item</div>
  <div>My third item</div>
</div>

div.list {
      counter-reset: list-number;
    }
    div.list div:before {
      counter-increment: list-number;
      content: counter(list-number);
      
      margin-right: 10px;
      margin-bottom:10px;
      width:35px;
      height:35px;
      display:inline-flex;
      align-items:center;
      justify-content: center;
      font-size:16px;
      background-color:#d7385e;
      border-radius:50%;
      color:#fff;
    }

     div.list div {
       color: purple;
       display: flex;
       margin: 15px 0px;
     }

<div class="list">
  <div>My first item <br>
    My first item continued
  </div><br>
  <div>My second item</div><br>
  <div>My third item</div>
</div>

div.list {
  counter-reset: list-number;
}
div.list div:before {
  counter-increment: list-number;
  content: counter(list-number);
  
  margin-right: 10px;
  margin-bottom:10px;
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  font-size:16px;
  background-color:#d7385e;
  border-radius:50%;
  color:#fff;
}

 div.list div {
   color: purple;
   display: flex;
 }

0 commentaires

1
votes

il suffit d'ajouter un dispaly:flex

<div class="list">
  <div>My first item <br> My first item continued
  </div>
  <br>
  <div>My second item</div>
  <br>
  <div>My third item</div>
</div>

div.list {
  counter-reset: list-number;
}

.list > div::before {
  counter-increment: list-number;
  content: counter(list-number);
  margin-right: 10px;
  margin-bottom: 10px;
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #d7385e;
  border-radius: 50%;
  color: #fff;
}

.list > div {
  display: flex;
  color: purple;
}

0 commentaires

0
votes

Il semble qu'il y ait eu une certaine confusion quant à ce à quoi la solution devrait ressembler sur la base de la réponse courante d'ajout d' display: flex; à ma div.list div

Quand en fait, cela ne fait pas que les lignes s'enroulent autour du cercle numérique tel qu'affiché dans l'image de ce que devrait être le résultat.

Grâce au commentaire de @TemaniAfif, avec la solution de "add float:left; to pseudo element", les lignes s'enroulent maintenant autour du cercle numérique.

Néanmoins, merci pour toutes vos contributions.

0 commentaires