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，我希望与其他导航内联，但浮动到页面的右侧。我希望我可以简单地在新列表项周围添加导航：

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

并将其设为样式：

.feed{
   float: right;
}

但是这会强制列表中的其他4个项目向左移动，因为text-align：center现在将基于从投资组合的p到Feed中的d的中心点居中。由于我希望将feed包装在nav中，我不能忽略feed项（我也想在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;
}

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

1 个答案: