html - css - 如何将 <li> 放置在水平 <ul> 中？

Question

我有 section，其中包含水平 ul，其中包含四个 li， 如下:

#header-strip ul {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    height: 4vh;
    width: 100%;
    background-color: grey;
    list-style-type: none;
}

#header-strip li {
  display: inline;
}

<section id="header-strip">
    <ul>
      <li>meant to be left</li
      ><li>meant to be centered</li
      ><li>meant to be just before last</li
      ><li>meant to be right</li
      >
    </ul>
  </section>

要求:
- 左边的第一项与屏幕边缘有一些小百分比的偏移
- 第二个元素位于中间
- 第三项位于右侧，与第四项之间有一定的百分比空间
- 右侧第四项，与屏幕边缘的偏移百分比

我可以使用基本的 justify-content: space- Between; 来定位 li，但不知道如何以自定义方式定位它。

它应该看起来像这样:

Answer 1

只需更改第二个元素的边距并使其自动

附带说明:使用 Flexbox，您无需担心空格，也无需将元素定义为 inline

#header-strip ul {
  display: flex;
  margin: 0;
  padding: 0;
  color:#ffff;
  width: 100%;
  background-color: grey;
  list-style-type: none;
}

#header-strip li {
 margin:0 2%;
}

#header-strip li:nth-child(2) {
  margin: auto;
}

<section id="header-strip">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>

  </ul>
</section>