css - 如何在水平<ul>中定位<li>？

Question

我有section，其中包含水平ul，其中包含四个li＆＃39}， 如下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

要求：
- 左边的第一个项目，屏幕边缘的一小部分偏移量 - 以中间为中心的第二个项目 - 右边的第三个项目，在第四个之间有一定的百分比 - 右边第四个项目，偏离屏幕边缘的百分比

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

它应该是这样的：

Answer 1

只需更改第二个元素的边距并使其成为auto

作为旁注：使用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>

Answer 2

如果您使用的是flexbox：

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

// CSS

.fill {
    flex-grow: 2;
}