Javascript 元素之间的间距相等，同时保持第一个和最后一个与相对边对齐

我试图以相等的间距分布元素，同时保持第一个和最后一个项目左右对齐

我相信基于flex的布局有一个简单的解决方案，但我也希望支持较旧的浏览器

我已经制作了一个基于JS的解决方案，我将发布这个解决方案，但请随意推荐更好的解决方案&如果可能的话，只通过CSS

这是一本书

保险商实验室{ 位置：相对位置； 保证金：0； 字号：0； 填充：0； 显示：表格； 宽度：100%； 列表样式：无； } ul：之后{ 内容：； 显示：块； 位置：绝对位置； 最高：50%； 背景：2000人； 左：0； 高度：1px； 宽度：100%； z指数：-1； } 李{ 显示：表格单元格； 文本对齐：居中； } 李：第一个孩子{ 文本对齐：左对齐； } 李：最后一个孩子{ 文本对齐：右对齐； } 跨度{ 字体系列：无衬线； 显示：内联块； 字体大小：15px； 线高：1米； 颜色：fff； 背景：2000人； 填充：6px 9.34px； 边界半径：999px； } 1. 2. 3. 4. 5. 我使用了一个基于javascript的解决方案，它可以做到这一点：

计算项目数5 不包括第一项和最后一项5-2=3 将其3计算为双3*2=6 将第一个和最后一个返回值相加6+2=8 现在得到一个百分比除法100/8=12.5% 然后给出第一个和最后一个元素的总宽度的百分比，剩余的是12.5*2=25%。 [1=12.5%][2=25%][3=25%][4=25%][5=12.5%]=100%

您可以查看

JS

---

请注意，我必须添加一个wrap div，填充元素的一半，并将第一个和最后一个元素翻译为偏移50%，以便真正成为中心。

这里有一个基于flex的解决方案，供通过搜索查找此帖子的人使用

有关浏览器支持数据，请参见下文

保险商实验室{ 显示器：flex； 证明内容：之间的空间； 位置：相对位置； 保证金：0； 字号：0； 填充：0； 列表样式：无； } ul：之后{ 内容：； 位置：绝对位置； 宽度：100%； 最高：50%； 背景色：000； 高度：1px； z指数：-1； } 跨度{ 字体系列：无衬线； 显示：内联块； 字体大小：15px； 线高：1米； 颜色：fff； 背景：2000人； 填充：6px 9.34px； 边界半径：50%； } 1. 2. 3. 4. 5. CSS

HTML

<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>

.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-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);

 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;
    }

<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>