Donc, je pensais que j'étais assez bon avec CSS jusqu'à ce que j'ai perdu une journée entière à essayer de comprendre un problème aussi minuscule (et peut-être évident pour beaucoup d'entre vous).

Voici un violon pour montrer à peu près ma structure: https://jsfiddle.net/dbcxv7pg/

HTML

<ul class="tabs">

    <li class="tab-link"><span>Digital Strategy</span></li>
    <li class="tab-link"><span>Content Marketing</span></li>
    <li class="tab-link"><span>E-Mail Marketing</span></li>
    <li class="tab-link"><span>Social Media</span></li>
    <li class="tab-link"><span>Paid Search</span></li>
    <li class="tab-link"><span>Paid Social</span></li>
    <li class="tab-link"><span>SEO</span></li>
    <li class="tab-link"><span>Analysis &amp; Reporting</span></li>
    <li class="tab-link"><span>Community Management</span></li>
    <li class="tab-link"><span>Influencer Marketing</span></li>
    <li class="tab-link"><span>UX</span></li>

</ul>

CSS

ul.tabs {
    display:flex;
    list-style: none;
    border-top: 2px solid;
    border-bottom: 2px solid;
    padding: 6px;
    justify-content: space-between;
}
ul.tabs li {
    text-align:center;
}

Comme vous pouvez le voir, si la fenêtre n'est pas assez large pour afficher le texte sur une ligne, le texte se divisera en une nouvelle ligne, et c'est très bien car c'est ce que je veux.

Mais une fois que le texte est rompu, un espace vide étrange apparaît sur les côtés droit et gauche de certains éléments de texte, ce qui rend l'espacement entre les éléments inégal:

enter image description here

J'ai essayé de jouer avec les espaces blancs mais cela n'a pas semblé aider. Avez-vous une idée de la façon de supprimer cet écart?

Merci beaucoup.

2
Pelly 5 avril 2017 à 12:50

2 réponses

Meilleure réponse

Comme l'a souligné @Pete:

Le rembourrage supplémentaire est dû au fait que les li sont étirés pour essayer de partager l'espace - et certains sont plus étirés que d'autres, ce qui donne l'impression que vous avez un rembourrage inégal.

Cela a quelque chose à voir avec la façon dont la base flexible partage l'espace des éléments flexibles enfants.

Si vous le définissez sur 0, vous verrez que le contenu de justification fonctionne correctement, mais vos éléments sont toujours à leur plus petit

Merci beaucoup pour cette clarification, Pete.

0
Community 20 juin 2020 à 09:12

Le problème ici est simplement que lorsque le texte se brise, les mots plus longs auront plus d'espace blanc sur le côté gauche et droit (parce que text-align: center) jusqu'à ce qu'ils reviennent à une ligne. Cela crée un espacement inégal entre les li dans votre code.

.flex {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.a, .b {
  border: 1px solid black;
  text-align: center;
}
<div class="flex">
  <div class="a">Aasdfasdfasdfsdfasdfsasdf sdfdasdfssdfsdf</div>
  <div class="b">Bsdfsdf sdf</div>
</div>

Une solution pour supprimer cet écart serait de définir word-break: break-all

.flex {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.a, .b {
  border: 1px solid black;
  text-align: center;
  word-break: break-all;
}
<div class="flex">
  <div class="a">Aasdfasdfasdfsdfasdfsasdf sdfdasdfssdfsdf</div>
  <div class="b">Bsdfsdf sdf</div>
</div>
0
Nenad Vracar 5 avril 2017 à 10:22