css align element使它们之间具有相同的空格

Question

所以我有以下场景，我有一个列表（可以是其他任何东西，我真的不在乎），它们之间必须有相同的间距（绿线）和开头和结尾的相同间距（红色箭头）。所有这些都没有容器具有固定位置，所以如果我调整大小和/添加更多元素，它们仍然应该正确跨越。

到目前为止，我已经创建了一个pen。

到目前为止，这是我的代码：

ul{
  width: 90%;
  border: 1px solid black;
}

li{
  display: inline-block;
  margin: 0 100px;

  border:1px solid orangered;
}
li:first-child{
  margin-left: 20px;
}

li:last-child{
  margin-right: 20px;
}

我也尝试使用 display：grid ，它们在红色边距中正确匹配，但它们之间的间距不等。

这可以在不使用JS的情况下实现吗？

Answer 1

您可以在display: flex元素

上使用justify-content: space-around和ul

＆＃13;

＆＃13;

ul{
  width: 100%;
  justify-content: space-around;
  display: flex;
  list-style: none;
  padding: 0;
}

li{
  border: 1px solid red;
  padding: 0;
}

＆＃13;

<ul>
  <li>list element 1</li>
  <li>element 2</li>
  <li>e4</li>
  <li>list e5</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

ul{
    padding-left: 20px;
    padding-right: 20px;
}
li{
    display: inline-block;
    padding-left: 100px;
    padding-right: 100px;
}
li:first-child{
    padding-left: 0px;
}
li:last-child{
    padding-right: 0px;
}

尝试一下：）