偏移 centeres li 列表中的最后一个 li

Question

我有一个居中的 LI 的 UL（就像那些默认的导航栏...）- 请参阅下面的代码。

现在我想对此做一些奇怪的调整。我希望最后一个 li 保持在他之前最后一个 li 的左侧（就像 float: left 一样）但是没有他在 ul 中使用 space，所以其他 li 将在中间，他只会坚持在一边（也许就像绝对位置的元素会......）。另一件事是，当这个奇怪的 li 独自一人在 ul 时，我需要工作。这是一张更好解释的图片： weird sticky li image before and after

这里是 codepen playground with that.

这里还有一个内置的：

*{font-size:24px;text-align:center;}
.con { background: #aaa; }
.navbar { background: #eee; width:70%;margin:auto;}
.navbar li{display:inline-block; padding: 4px 8px; border: 1px solid blue;}

.last{color:red;}

.afterlast{margin-right:-78.6px;}

BEFORE:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>
AFTER:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>

现在，如果可能的话，我更喜欢纯粹的 css 解决方案，当然它应该是响应式的。

Answer 1

您必须向该 li 元素添加一个额外的 class，当它单独存在时，您可以调整样式并使其再次占据 space。我添加了 .aloneweird class 并调整了它的样式。此外，我从 ul 元素中删除了 padding-left ，这使得它不居中。

* {
  font-size: 24px;
  text-align: center;
}

.con {
  background: #aaa;
}

.navbar {
  background: #eee;
  width: 70%;
  margin: auto;
}

.navbar ul {
  padding-left: 0;
}

.navbar li {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid blue;
}

.last {
  color: red;
}

.afterlast {
  position: absolute;
  margin-left: .25em;
}

.aloneweird {
  position: relative;
  margin-left: 0;
}

<h2>AFTER:</h2>
<div class="con">
  <nav class="navbar">
    <ul class="nav">
      <li>HOME</li>
      <li>ABOUT</li>
      <li>STUFF</li>
      <li>CONTACT</li>
      <li class="last afterlast">WEIRD</li>
    </ul>
  </nav>
  <!-- /.navbar -->
</div>

<h2>ALONE:</h2>
<div class="con">
  <nav class="navbar">
    <ul class="nav">
      <li class="last afterlast aloneweird">WEIRD</li>
    </ul>
  </nav>
  <!-- /.navbar -->
</div>

Answer 2

因此，结合感谢用户的回答和评论，这是最佳答案（纯css）：

使用绝对定位。
怪力孤单时使用:first-child:last-child设置相对位置

这是直播：

* {
  font-size: 24px;
  text-align: center;
}

.con {
  background: #aaa;
}

.navbar {
  background: #eee;
  width: 70%;
  margin: auto;
}

.navbar ul {
  padding: 0;
}

.navbar li {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid blue;
}

.last {
  color: red;
}

.afterlast:last-child {
  position: absolute;
  margin-left: .25em;
}

.afterlast:first-child:last-child {
  position: relative;
  margin-left: 0;
}

<h2>BEFORE:</h2>
<div class="con">
  <nav class="navbar">
    <ul class="nav">
      <li>HOME</li>
      <li>ABOUT</li>
      <li>STUFF</li>
      <li>CONTACT</li>
      <li class="last">WEIRD</li>
    </ul>
  </nav>
  <!-- /.navbar -->
</div>
<h2>AFTER:</h2>
<div class="con">
  <nav class="navbar">
    <ul class="nav">
      <li>HOME</li>
      <li>ABOUT</li>
      <li>STUFF</li>
      <li>CONTACT</li>
      <li class="last afterlast">WEIRD</li>
    </ul>
  </nav>
  <!-- /.navbar -->
</div>

<h2>AFTER ALONE:</h2>
<div class="con">
  <nav class="navbar">
    <ul>
      <li class="last afterlast">WEIRD</li>
    </ul>
  </nav>
  <!-- /.navbar -->
</div>

感谢：@sorayadragon、@JaKhris 和@Michael Coker。

偏移 centeres li 列表中的最后一个 li

offset last li in a centeres li's list

css

html-lists

css-float

responsive