导航元素之间有目的的不均匀间距

Question

我在标题中有一个导航，列表中有 4 个基本元素，我希望均匀分布。我没有问题让它工作。

<nav>
     <ul>
        <li><a href="index.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="resume.html" >Resume</a></li>
        <li><a href="contact.html" class="selected" >Contact</a></li>
     </ul>
  </nav>
 </header>

CSS：

nav{
  text-align: center;
  padding: 3px 0;
  margin: 5px 0 0 5px;
}

nav ul{
  list-style: none;
  margin: 0 30px;
  padding: 2px 20px 0 0;


}
nav li{
  display: inline-block;
  font-size: 1.5em;
}

nav a{
  font-weight: 800;
  color: #fff;
  padding: 2px 10px 2px;
  text-transform: uppercase;
  text-decoration: none;
}

nav a:active{
    color: #00A2E0;
}

nav a{
    color: #fff;
}
nav a.selected, nav a:hover{
    color: #23c3ff;
}

但是，我想要一个指向列表中另一个项目的链接，我们称之为提要，我想要与导航的其余部分内联，但浮动到页面的右侧。我希望我可以简单地在新列表项周围添加一个导航：

<div class="feed"><li><a href="feed.html">feed</a></li></div>

并设置如下样式：

.feed{
   float: right;
}

但这会强制列表中的其他 4 个项目向左移动，因为 text-align: center 现在将基于从投资组合的 p 到 feed 中的 d 的中心点居中。因为我希望提要包含在导航中，所以我不能只忽略提要项（我也希望它在一个 div 中，因为我希望它的样式与其他导航项略有不同）。

无论如何，有没有办法让我的导航保持完整并进行调整以允许原始 4 项（投资组合、关于、简历和联系）在标题中保持中心，并且提要在右侧间隔更远但仍然保持它包裹在同一个导航中？

非常感谢！

Answer 1

this是你的意思吗？

我在#feed li 上使用了绝对定位，并添加了相对于ul 的位置，这样新位置#feed 元素就不会干扰居中。

更新的 HTML

<nav>
    <ul>
        <li><a href="index.html">Portfolio</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="resume.html">Resume</a>
        </li>
        <li><a href="contact.html" class="selected">Contact</a>
        </li>
        <li id="feed">
            <a href="feed.html">feed</a>
        </li>
    </ul>
</nav>

更新的 CSS

nav ul {
    list-style: none;
    margin: 0 30px;
    padding: 2px 20px 0 0;
    position: relative;
}
#feed {
    position: absolute;
    right: 0px;
}