如何将h1放在导航ul的同一行和中间

Question

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

现在我的HTML看起来像这样（我使用的是icon-fonts btw）：

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