html - 我可以对齐吗当它具有绝对位置时进入左右

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 有一个固定的宽度，它总是位于页面的中心。

我的问题是我需要在下面所附图片<li>的前后对齐。:empty <li>（在这种情况下，前四个<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>有用，但在这里我不能使用固定宽度。

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

谢谢你。

标签： htmlcss

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>