html 正确居中导航栏项目[重复]

m0rkklqb 于 12个月前发布在其他

关注(0)|答案(2)|浏览(91)

此问题已在此处有答案：

Center one and right/left align other flexbox element（11个回答）
6天前关闭
我目前正在学习HTML、CSS和Javacript。我正在做一个餐厅网站，目前正在做导航栏。
我有4个导航栏的主题（主页，菜单，评论和关于我们）和一个联系按钮。

<!DOCTYPE html>
<html>
<head>
    <title>Gastronomy Galaxy</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
</head>
    <body>
            <nav>
                <ul>
                    <li><a href="Home.html">Home</a></li>
                    <li><a href="menu.html">Menu</a></li>
                    <li><a href="reviews.html">Reviews</a></li>
                    <li><a href="about.html">About us</a></li>
                </ul>
                <button id="contact">Contact</button>
            </nav>
    </body>
</html>

body{
    margin: 0;
    padding: 0;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #A78F69;
    line-height: 70px;
    padding: 0 20px;
  }

  nav ul {
    list-style-type: none;
    background-color: #A78F69; 
    color: #fff;
    display: flex;
    margin: auto;
    padding: 0;
}

nav li {
    margin-right: 25px;
    font-size: 18px;
}

nav a {
    color: #000000;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

#contact {
    
}

我试图居中的4个主题，但似乎按钮（在导航栏的右侧对齐）是interfiring与居中的4个主题，因为它似乎有点偏离中心的全宽度的显示器.
我已经看过一些视频，但它总是有3个主要部分（图像，主题和按钮），但我只有2个（主题和按钮）。有人能帮帮我吗？谢谢！（顺便说一句，如果我有一些语法错误，对不起）

Html

来源：https://stackoverflow.com/questions/77249627/centering-navbar-items-correctly