CSS-如何定位< li>在水平< ul>中?

问题描述：

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

I have section, which contains horizontal ul, which contains four li's, as following:

#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 ，但是不知道如何以自定义方式进行定位.

Requirements:
- first item at left with some small percentage offset of screen edge
- second item centered in the middle
- third item to be at right, with some percentage space between to fourth
- fourth item at right, with percentage offset from screen edge

I am able to position li's with basic justify-content: space-between;, but don't know how to position it the custom way.

它应该看起来像这样:

答

只需更改第二个元素的边距并将其设置为 auto

Simply change the margin of the second element and make it 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>

CSS-如何定位< li>在水平< ul>中?

相关推荐