Text-align:center没有对齐<nav> 部分的按钮。

Question

我不知道这是这段代码还是周围代码的问题。正如你所看到的，当你运行这段代码时，将这些按钮居中的效果非常好。

<nav id="navbar" style="text-align:center">
    <div class="div">
    <button class="navbutton" onclick="window.location.href='index.html'" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Home</button>
    <button class="navbutton" onclick="window.location.href='reviews.php'" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Leave a review</button>
    <button class="navbutton" onclick="window.location.href='recommendations.php'"style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Current reviews</button>
    <button class="navbutton" onclick="window.location.href='mailto:[email protected]'" target="_blank" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Contact us</button>
    </div>
</nav>

由于某些原因，在我的 网站 它只是把它变成了一堆按钮。

Answer 1

你需要为这个容器定义一个更大的宽度。在你的css中，修改类 div 从 width: 200px; 到 width: 100%;

Answer 2

这是因为在你的网站上，你给div元素设置了200px的固定宽度。去掉这个，按钮就会变成一行。

Answer 3

尽量保持代码的整洁，在外部文件上进行样式设计，或者至少是分开的。当你点击 "留下评论 "的时候，你的导航条看起来就像你希望的那样。

我复制了 "留下评论 "页面的代码。

<div class="div">
    <button class="navbutton" onclick="window.location.href='index.html'">Home</button>
    <button class="navbutton" onclick="window.location.href='reviews.php'">Leave a review</button>
    <button class="navbutton" onclick="window.location.href='recommendations.php'">Current reviews</button>
    <button class="navbutton" onclick="window.location.href='mailto:[email protected]'"
        target="_blank">Contact us</button>
</div>

Answer 4

就像我之前说的，保持代码分离:)想象一下，如果你想让你的菜单有不同的颜色，那么你将不得不在很多地方改变颜色。现在，你已经在一个地方，你可以检查其他人对设置的意见。

<nav id="navbar" style="text-align:center">
    <div class="div">
        <button class="navbutton" onclick="window.location.href='index.html'">Home</button>
        <button class="navbutton" onclick="window.location.href='reviews.php'">Leave a review</button>
        <button class="navbutton" onclick="window.location.href='recommendations.php'">Current reviews</button>
        <button class="navbutton" onclick="window.location.href='mailto:[email protected]'" target="_blank">Contact us</button>
    </div>
</nav>
<style>
    .navbutton {
  background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;
}
</style>

您的网站。