html - 如何将 h1 放在同一行和导航中间

Question

我正在为我的网站制作一个nav 栏。我希望 nav 栏具有水平居中的 li 元素，除了我希望中间元素是 h1 最好不是一部分列表。 (这是为了保留特定于导航的 nav 元素，而不是页面的标题。

现在我的 HTML 看起来像这样(顺便说一句，我正在使用图标字体):

<nav class="nav">
    <h1>Page title</h1>
    <ul>
        <li><span data-icon="&#xE603;"></span><h2>HOME</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>ABOUT</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>CONTACT</h2></li>
    </ul>
</nav>

我的 CSS 是这样的:

nav {
    background: gray;
    text-align: center;
}
nav li:first-child {
    display: inline-block;
    float: left;
}

nav li {
    float: right
}

输出看起来像这样:

无论我尝试什么，我都无法在同一行上获得 h1。请注意，我不只想插入 p 元素作为列表中的第二项。任何帮助都会很棒。

Answer 1

我认为添加这个会有所帮助:

nav { position: relative; }
nav h1 { position: absolute; top: 0; width: 100%; }