代码之家 › 专栏 › 技术社区 › alexpopa

css对齐元素,使它们之间具有相同的空间[重复]

html-lists flexbox css html

alexpopa · 技术社区 · 7 年前

我创建了一个 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;
}

我也试过了 显示:栅格

2 回复 | 直到 3 年前

Johannes 7 年前

您可以使用 display: flex justify-content: space-around 上 ul 要素

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>

Himanshu Bansal Little Bug 7 年前

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