html - 将标题定位在中心

Question

我的页眉有一些小问题，它必须是对称完美的，我在这方面很糟糕所以你能告诉我如何使它位于中心并保持链接之间的边距吗？

它应该是什么样子:

我也很想知道如何在悬停和简单的语言切换器上制作下划线。

我的代码:

  <nav id="nav">
    <ul style="text-transform:uppercase">
        <li><a href="#intro">Strona główna</a></li>
        <li><a href="#one">Portfolio</a></li>
        <li><a href="#"><img src="logo.png"></img></a></li>
        <li><a href="#two">O mnie</a></li>
        <li><a href="#contact">Kontakt</a></li>
    </ul>
  </nav>

CSS:

#nav {
    position: absolute;
    right: 0.5em;
    top: 0;
    height: 3em;
    line-height: 3em;
    margin-left:30%
}

    #nav ul {
        margin: 0;
    }

        #nav ul li {
            display: inline-block;
            margin-left: 0.5em;
            font-size: 0.9em;
        }

            #nav ul li a {
                display: block;
                color: inherit;
                text-decoration: none;
                height: 3em;
                line-height: 3em;
                padding: 0 0.5em 0 0.5em;
                outline: 0;
            }

Answer 1

从您的代码中删除了大量的 margin 和 padding。

添加position: relative;, text-align: center;, width: 100%;到#nav.

此外，将 margin:0; 和 padding:0; 添加到 *

注意:由于某些原因，您在 li 中没有 img。

对此的更改:

*{
    margin:0;
    padding:0;
}
#nav {
    position: relative;
    top: 0;
    height: 3em;
    line-height: 3em;
    text-align: center;
    width: 100%;
}
#nav ul {
    margin: 0;
}
#nav ul li {
    display: inline-block;
    font-size: 0.9em;
}
#nav ul li a {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 3em;
    line-height: 3em;
    padding: 0 0.5em 0 0.5em;
    outline: 0;
}

用于悬停时的下划线。

试试这个:

#nav ul li a:hover {
    border-bottom: 3px solid #eee;
}

JSFiddle Demo