Html 将收割台定位在中心

我的标题有点小问题，必须是对称的完美，我在这方面很糟糕，所以你能告诉我如何使它定位在中心，并保持链接之间的空白

它应该是什么样子的：

我还想知道如何在hover和简单的语言切换器上加下划线

我的代码：

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

---

从代码中删除了大量的

边距

和

填充

新增

位置：相对，
文本对齐：居中，
宽度：100%至
#导航

另外，增加了
边距：0和
填充：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;
}

用于悬停时的下划线

试试这个：

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

将此添加到css中，以便在悬停时使链接带下划线

#nav ul li a:HOVER{
    text-decoration : underline;
}

更新您的
Nav
类，如下所示

#nav {
position: absolute;
right: 0;
top: 0;
left:0;
margin:0px auto;
height: 3em;
line-height: 3em;
}

您可以使用CSS属性“文本对齐：居中”

至于悬停时的下划线？只需向其添加一个onhover事件处理程序，然后使用
document.getElementById（“Makeanidforthestuffyouwantunderlined”）.class=“Someclass”
在javascript中

最后，您可以转到CSS并执行此操作

.Someclass{
text-decoration:underline;
}

或者，有些元素支持“hover”伪元素

p:hover{
text-decoration:underline;
}

你能发布你的CSS吗？为什么在
之间没有
li
？我们能得到你的徽标的完整路径吗？像在#nav中一样，尝试删除
左边距
，添加
文本对齐：居中
和
宽度：100%
。您也可以尝试对其显示
display:flex
。徽标是120x140，这是（Logo.png）的完整路径，因为它与index.htmlGreat位于同一文件夹中！我真的很感激：）看起来好多了，但我还是有问题，因为语言切换器（我也不知道如何使这个简单的语言切换器：|）用下划线更新了演示：）尝试先创建一个语言切换器。。。它需要一些后端代码来切换语言。无法在纯HTML/CSS中完成。谷歌：）耶，工作真的很好！非常感谢你的帮助，伙计：）