Discussion :

[Ushuango]

Bonsoir,

je suis sous wordpress mais je pense que c'est un problème de css :
dans mon contenu ( éditeur de texte WordPress ) le client rentre une liste de mots ( il a le droit !)
je mets ces mots en ligne: ul { display: flex; justify-content: space-between; }.

Normalement, ça pourrait tenir sur un ligne ( c'est le but ), mais sans coupures dans les li !
Mes li auss isont en flex: le point rouge avec le pseudo :before qui bizarrement n'apparaît pas dans tous les li, remplacé par du blanc ???
Probablement que quelque chose m'échappe ( je doit être fatigué )
Un tite photo:


Pourtant , je suis sûr que c'est tout bête...
Bonne soirée , ( si ça se trouve après une bonne nuit je vais trouver... )

[darkstar123456]

Bonjour,

Quelle est la CSS complète de tout ça ??
Et quel résultat souhaitez-vous obtenir exactement ? Je ne comprends pas bien pourquoi on a une puce dans le cadre alors qui est ajouté via un before alors que plus haut on a sûrement list-style: none;.

Toujours est-il que si vous souhaitez que vos <li> prennent toute la place, il suffit de mettre width: 100%; et pas besoin de flex sur eux (à priori)
(Ce n'est pas le ul qui est en faute, sur la capture d'écran on voit bien qu'il prend tout l'espace disponible)

Voici un Codepen d'exemple : https://codepen.io/DarkStar123456/pen/JjJwyeE

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Code scss :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
 
li {
  border: 2px solid red;
  width: 100%;
 
  &:before {
    content: '•';
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    color: green;
    font-size: 40px;
  }
}

PS : J'ai ajouté une seconde liste où le texte ne passe pas sous la puce, c'est plus joli

[Ushuango]

Bonjour,

tout est rentré dans l'ordre , comme d'habitude après une bonne nuit de sommeil...
Il va falloir à présent se poser la question de bien équilibrer travail et sommeil !!

Code scss :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
ul {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
        }
        li {
            font-size: 2rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            &:before {
                content: "";
                background-color: $red;
                border-radius:  50%;
                width: 0.7rem;
                height: 0.7rem;
                margin-right: 2rem;
                margin-left: 2rem;
                display: inline-block;
                vertical-align: middle;
            }
        }

et voilà le résultat que je voulais:


Le vertical-align: middle ne fonctionne pas, j'ai donc gargé mes li en display: flex;

[NoSmoking]

Bonjour,

Normalement, ça pourrait tenir sur un ligne ( c'est le but ), mais sans coupures dans les li !

Dans ce cas on utilise la déclaration suivante : white-space: nowrap.

Le vertical-align: middle ne fonctionne pas, j'ai donc gargé mes li en display: flex;

le display: flex; doit s'appliquer sur l'élément en display:flex.