Discussion :

[pilan]

Bonjour à tous,

Je rencontre un souci, voilà je suis sur un développement de site, et je l'effectue d'abord en mobile first sans utiliser les media quieries ( je le ferai seulement pour les tablette et plus grand écran).

Je souhaite que ma liste se centre au milieu, et que les extrémités des écran soit la même pour toutes types de taille de mobile mais ca ne fonctionne pas. ( j'ai pour tout utilisé tex-align: center ).
Un autre souci quand j'essaye d'agrandir le padding + un margin pour séparer mes list qui contiennent une bordure automatiquement ça me créer un débordement dans mes devtools.


Dernier souci les li ne prennent pas là même largeur lorsque je fais les bordures. Et elle s'élargissent complément jusqu'au extrémité de l'écran.
Il faut utiliser les width je pense..

Code html :

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

1
2
3
4
5
6
7
8
9
 <ul>
          <li>
            <span class="number">1<i class="fas fa-mobile-alt"></i></span >Choissisez un lieu
          </li>
          <li>
            <span class="number">2</span><i class="fas fa-list-ul"></i>Composez votre table
          </li>
 
        </ul>

Code :

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

1
2
3
4
5
6
7
8
9
section ul li {
  list-style: none;
  text-align: center;
  border-radius: 1rem;
  font-weight: bold;
  background: #f0f2f2;
  box-shadow: 1px 1px 12px #ded9d9;
  padding: 10px 40px;
}

Code :

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

1
2
3
4
5
.fa-mobile-alt,
.fa-list-ul,
.fa-store {
  font-size: 0.8rem;
}

J'essaye de ne pas insérer des valeurs fixes mais des width 80% par exemple.

Merci pour vos pistes. Je pense mal utiliser les propriétés.

[NoSmoking]

Bonjour,

un petit rappel à toutes fins utiles !

Une discussion = une question Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue. Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

---

Les élément <ul> sont par défaut des éléments de « type block », ce qui fait qu'ils occupent toute la largeur de la fenêtre.

Si tu ne veux/peux pas la dimensionner tu peux recourir au mode de rendu flexible et en l'appliquant sur un conteneur.

Le HTML deviendrait :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<nav>
  <ul>
    <li>
      <span class="number">1<i class="fas fa-mobile-alt"></i></span>Choissisez un lieu
    </li>
    <li>
      <span class="number">2</span><i class="fas fa-list-ul"></i>Composez votre table
    </li>
  </ul>
</nav>

A partir de là tu peux appliquer les CSS suivant qui devrait te permettre d'obtenir le rendu souhaité :

Code :

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

1
2
3
4
5
6
nav {
  display: flex;
}
ul {
  margin: auto;
}

Au passage si c'est pour mettre des numéros sur tes <li> autant utiliser un liste ordonnée, <ol>.

[pilan]

Bonjour,

Merci pour le rappel, je ferai plus attention sur mes prochains post, je vous remercie pour votre réponse.

Je vais essayer de modifier mon code et voir le rendu.

[pilan]

Bonjour,
Navrée de répondre aussi tardivement, merci d'avoir prit le temps de m'expliquer et de montrer des nouvelles propriétés, ça va bien m'aider pour d'autre utilité. 👍👍☺️☺️