所以我试图将我的名字和导航栏居中，因为你可以看到它看起来居中，但有下划线。导航栏
所以当我去掉文本装饰时，它是以Navbar没有文本装饰的为中心的
有没有一种方法可以让它保持居中，或者我应该避免使用列表格式进行导航。我想使用它，因为我想让我的网站对移动友好，这就是你可以将导航分组放在菜单按钮中的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Builder</title>
</head>
<body>
<div class= "container">
<div class="navbar">
<div id="name"><span id="coname">Raul Co</span><span id=lname>rrea</span></div>
<nav>
<ul id="menuList">
<li><a class="active" href="">Mi Casa</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Cooking</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<a id="menu" href="#Menu"><span>Menu</span></a>
</div>
</div>
</body>
</html>
CSS代码
*{
margin: 0;
padding: 0;
overflow: hidden;
}
.container{
overflow: hidden;
background-color: #908070;
border: 2px solid blue;
}
.navbar{
display: flex;
/* align-items: center; */
font-size: 1.8em;
}
#name{
font-family: "Roboto Slab";
float: left;
padding-left: 1rem;
}
#coname {
color: #F58F7C;
}
#lname{
color: #99B3FF;
}
#menu{
display:none;
}
nav{
flex: 1;
text-align: right;
}
nav ul li{
list-style: none;
display: inline-block;
margin-right: 30px;
}
nav ul li a{
text-decoration: none;
color: #707090;
font-size: 1em;
}
你可以做的是，在CSS文件中；删除nav ul li中的display: inline-block;，然后添加以下css代码：
nav ul {
display: flex;
align-items: center;
}
工作代码沙盒链接：https://codesandbox.io/s/priceless-dust-15u18o?file=/style.css:428-478