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

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

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

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

并设计成这样:

.feed{
   float: right;
}

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

无论如何，有没有办法让我的导航保持完整并进行调整以允许原来的 4 个元素(投资组合、关于、简历和联系方式)在标题中保持居中，并使 Feed 进一步向右间隔，但仍然保持它包裹在同一个导航中？

非常感谢!

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