css对齐元素在它们之间具有相同的空间[重复]答案

【问题标题】：css align element to have the same space between them [duplicate]css对齐元素在它们之间具有相同的空间[重复]
【发布时间】：2022-03-26 23:05:34
【问题描述】：

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

我已经创建了一个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来实现吗？

【问题讨论】：

标签： html css flexbox html-lists

【解决方案1】：

您可以在ulelement 上使用display: flex 和justify-content: space-around

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

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

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

【讨论】：

非常感谢 Johannes，您的评论让我找到了正确的方向！我最终使用了 justify-content: space-between 并向 ul 添加了填充。这正是我想要的。

【解决方案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;
}

试试看：）

【讨论】：