在中心列表中偏移最后一个li

Question

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

现在我想对此进行一些奇怪的调整。我希望最后一个李坚持在他前面的最后一个李的左边（就像浮动：左）但没有他在ul中占据空间，所以其他的李将在中心，他将只是坚持在一边（也许就像一个绝对的位置＆＃39; s元素将...）。另一件事是我需要工作，当这个奇怪的李独自在ul也。这是一个更好地解释的图像： weird sticky li image before and after

这是一个codepen playground with that。

此处还有一个内置的：

＆＃13;

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

所以，结合感恩用户的回答和评论，这是最好的答案（纯css）：

1. 使用绝对定位。
2. 当奇怪的李孤独时，使用: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。

Answer 2

您必须在该li元素本身添加一个额外的类，以便您可以调整样式并使其再次占用空间。我添加了.aloneweird类并调整了它的样式。另外，我从padding-left元素中移除了ul，这个元素正在使其不受影响。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;