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

【问题标题】：css - how to position <li> in horizontal <ul>?css - 如何在水平 <ul> 中定位 <li>？
【发布时间】：2018-06-06 17:26:12
【问题描述】：

我有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，但不知道如何以自定义方式定位它。

应该是这样的：

【问题讨论】：

标签： html css flexbox

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

【讨论】：

嘿，非常感谢:)。一个额外的问题。在我看来，中间元素位于第一个和第三个元素之间，但我希望它位于条带本身的中间。那么，该怎么做呢？
@milkamar 是的，没错，实际上它在两个元素之间居中......如果你想要一个完美的居中，你将需要很少的 hack。这是一个例子：jsfiddle.net/thdnmyLx

【解决方案2】：

如果你使用的是弹性盒子：

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

【讨论】：