当 <li> 具有绝对位置时，我可以将 <li> 对齐到左右吗

Question

我有一个简单的HTML 列表，它总是有如下偶数个项目：

<ul>
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
  <li><a href="">Item 4</a></li>
  <li></li>
  <li><a href="">Item 5</a></li>
  <li><a href="">Item 6</a></li>
  <li><a href="">Item 7</a></li>
  <li><a href="">Item 8</a></li>
</ul>

我想把这个列表放到页面的中心。在:empty li 上方有一个固定的宽度，它始终位于页面的中心。

我的问题是我需要在:empty<li> 的<li>s 之前和之后对齐，如下图所示。 （在这种情况下，前四个 <li> 到右侧，后四个 <li> 到左侧到 :empty 项目）。例如:empty 所有其他<li> 具有可变宽度。

这是我的CSS：

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0;
}

ul > li {
  position: relative;
  display: block;
}

ul > li:empty {
  width: 10em;
  background: #e04c4c;
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.left.last {
  margin-right: 5em;
}

.right.first {
  margin-left: 5em;
}

它对我有用，如果我有固定宽度<li>，但在这里我不能使用固定宽度。

谁能告诉我有没有其他方法可以得到我想要的输出？

谢谢。

Answer 1

我发现重新思考 html 的结构会有所帮助。由于固定宽度的空白空间需要位于屏幕的中心，因此将其绝对定位是正确的。但是，翻译它是有问题的，因为其他元素不尊重翻译的元素。相反，我们可以将它向右移动2em，因为我们知道这是固定宽度元素的一半。

接下来我们可以将两侧放置在空白区域的任一侧。左侧平移了其自身宽度的 100%。右侧被平移 4em（空白区域的宽度）。

最后为图片中的竖线添加了一些有趣的伪样式，以备不时之需。希望对您有所帮助！

a {
    color: black;
    text-decoration: none;
  }

  ul {
    margin: 0;
    padding: 0;
  }

  ul > li {
    list-style: none;
    white-space: nowrap;
  }

  ul > li:not(:last-child):after {
    content: "|";
    padding: 0.5em;
  }

  .empty-space {
    position: absolute;
    right: calc(50% - 2em); /* translate won't work here but we know it's fixed width */
    width: 4em;
    height: 2em;
    background-color: gray;
  }

  .list-left, .list-right {
    position: absolute;
    height: 2em;
    display: flex;
    align-items: center;
  }



  .list-left {
    transform: translateX(-100%);
  }

  .list-right {
    transform: translateX(4em);
  }
  
  /* Not necassary. Just to confirm that it is indeed in the center */
  .page-center {
    height: 100vh;
    width: 1px;
    background-color: red;
    position: absolute;
    right: 50%
  }

<div class="empty-space">
  <ul class="list-left">
     <li><a href="">Item 1 is longer</a></li>
     <li><a href="">Item 2</a></li>
     <li><a href="">Item 3</a></li>
  </ul>
  <ul class="list-right">
     <li><a href="">Item 4</a></li>
     <li><a href="">Item 5</a></li>
     <li><a href="">Item 6</a></li>
  </ul>
</div>
<!-- Not necassary. Just to confrim that it is indeed in the center -->
<div class="page-center"></div>