Espacement égal entre les éléments tout en gardant le premier et le dernier alignés sur des bords opposés.

Question

J'essaie de distribuer des éléments avec un espacement égal entre eux tout en gardant le premier et le dernier élément alignés à gauche et à droite.

Je pense que les mises en page basées sur la flexibilité offrent une solution facile pour cela, mais je veux également prendre en charge les navigateurs plus anciens.

J'ai déjà créé une solution basée sur JS que je vais poster, mais n'hésitez pas à suggérer de meilleures solutions et à dire si c'est possible en utilisant uniquement CSS.

Voici un violon .

ul {
  position: relative;
  margin: 0;
  font-size: 0;
  padding: 0;
  display: table;
  width: 100%;
  list-style: none;
}

ul:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  background: #000;
  left: 0;
  height: 1px;
  width: 100%;
  z-index: -1;
}

li {
  display: table-cell;
  text-align: center;
}

li:first-child {
  text-align: left;
}

li:last-child {
  text-align: right;
}

span {
  font-family: sans-serif;
  display: inline-block;
  font-size: 15px;
  line-height: 1em;
  color: #fff;
  background: #000;
  padding: 6px 9.34px;
  border-radius: 999px;
}

<ul>
  <li><span>1</span></li>
  <li><span>2</span></li>
  <li><span>3</span></li>
  <li><span>4</span></li>
  <li><span>5</span></li>
</ul>

Answer 1

Voici une solution flexible pour les personnes qui trouvent cet article via une recherche.

Voir ci-dessous pour les données relatives à la prise en charge des navigateurs.

ul {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 0;
  font-size: 0;
  padding: 0;
  list-style: none;
}

ul:after {
  content: '';
  position: absolute;
  width: 100%;
  top: 50%;
  background-color: #000;
  height: 1px;
  z-index: -1;
}

span {
  font-family: sans-serif;
  display: inline-block;
  font-size: 15px;
  line-height: 1em;
  color: #fff;
  background: #000;
  padding: 6px 9.34px;
  border-radius: 50%;
}

<ul>
  <li><span>1</span></li>
  <li><span>2</span></li>
  <li><span>3</span></li>
  <li><span>4</span></li>
  <li><span>5</span></li>
</ul>

Support des navigateurs : _Flexbox est pris en charge par tous les principaux navigateurs, sauf IE < 10 . Certaines versions récentes de navigateurs, comme Safari 8 et IE10, requièrent préfixes des fournisseurs . Pour un moyen rapide d'ajouter des préfixes, utilisez Préfixe automatique . Plus de détails dans cette réponse ._

Answer 2

J'ai utilisé une solution basée sur le javascript qui fait cela :

1. Compte le nombre d'articles (5)
2. Exclut le premier et le dernier élément (5-2=3)
3. Les compte (3) comme double (3*2=6)
4. Ajoute le premier et le dernier dos (6+2=8)
5. obtient maintenant une division en pourcentage (100/8=12,5%)
6. Ensuite, on donne ce pourcentage de la largeur totale au premier et au dernier élément, et le reste reçoit le double (12,5*2=25%) de ce pourcentage.

[1 = 12.5%] [2 = 25%] [3 = 25%] [4 = 25%] [5 = 12.5%] = 100%

Vous pouvez consulter le tripoter ici .

<div class="wrap">
  <ul class="js-equal-dist">
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
  </ul>
</div>

CSS

.wrap{
  padding: 0 14px;
}
ul {
  position: relative;
  margin: 0;
  font-size: 0;
  padding: 0;
  display: table;
  width: 100%;
  list-style: none;
}

ul:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  background: #000;
  left: 0;
  height: 1px;
  width: 100%;
  z-index: -1;
}

li {
  display: table-cell;
  text-align: center;
}

li:first-child {
  text-align: left;
}

li:last-child {
  text-align: right;
}

li:first-child span {
  transform: translateX(-50%);
}
li:last-child span {
  transform: translateX(50%);
}

span {
  font-family: sans-serif;
  display: inline-block;
  font-size: 15px;
  line-height: 1em;
  color: #fff;
  background: #000;
  padding: 6px 9.34px;
  border-radius: 999px;
}

JS

  // js-equal-dist
  var totalWidth = $('.js-equal-dist').outerWidth();
  var itemsLength = $('.js-equal-dist li').length;

  var percUnit = 100 / (((itemsLength - 2) * 2) + 2);
  percUnit = percUnit / 100 * totalWidth;

  $('.js-equal-dist li:not(:first-child):not(:last-child)').width(percUnit * 2);
  $('.js-equal-dist li:first-child(), .js-equal-dist li:last-Child()').width(percUnit);

Notez que j'ai dû ajouter un div wrap avec un padding égal à la moitié de l'élément et déplacer le premier et le dernier élément de 50% pour qu'ils soient vraiment centrés.

Answer 3

CSS

 div {
      width: 500px;
      background-color: black;
      font-size: 0;
    }

    span {
      color: black;
      width: 20px;
      height: 20px;
      display: inline-block;
      background-color: red;
      font-size: 15px;
      margin: 0 calc( ( 500px - 8 * 20px ) / ( 8 + ( 8 - 2 ) ) ); // 8 -> count of elements
    }

    span:first-child {
      margin-left: 0;
    }

    span:last-child {
      margin-right: 0;
    }

HTML

<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>

https://codepen.io/N11/pen/MvzeGM