Html 文本对齐：居中不对齐按钮（<；导航>；部分

我不确定这是该代码还是周围代码的问题。如您所见，在运行代码段时，将这些按钮居中可以完美地工作。

家
留下评论
当前评论
联系我们

这是因为在您的网站上，您将200px的固定宽度设置为div元素。移除该按钮，按钮将进入一行

您需要为该容器定义更大的宽度。在css中，将类

div

从

width:200px至<代码>宽度：100%

尽量保持代码整洁，在外部文件上设置样式，或者至少将代码分开。
当你点击“离开评论”时，你的导航栏看起来就像你想要的

我复制了代码表单“离开审查”页面：


家
留下评论
当前评论
联系我们
就像我之前说过的，将代码分开：）
想象一下，如果你想在菜单上添加不同的颜色，那么你必须在许多地方更改颜色。现在，您可以在一个地方查看其他人对设置的建议

<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:info.awolindustries@gmail.com'" 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>


家
留下评论
当前评论
联系我们
.导航按钮{
背景色：rgb（0255,0）；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
显示：内联块；
字体大小：16px；
}

嗯，我不太清楚你的意思。唯一具有“宽度”元素的是产品。我更改了它，但它没有做任何操作。请尝试以下操作：在您的
标记下，将此
更改为此
。然后将该类添加到CSS:
.nav按钮{width:100%；}
等等，你是指id，还是在谈论其他东西？反正我一直都在这么做。由于某些原因，我的托管服务不允许我在每个HTML页面上连接多个CSS文档，因此这样做，所有的样式都消失了，而且根本没有将其居中。好的，我建议将所有CSS保留在标记中，例如，你有重复行的音调。给我5英里，我会发布答案我喜欢你的想法，但它不能解决中心问题：（div{float:left；height:250px；width:100%；padding:010px；}只需更改div的宽度。你将其设置为200px。使其为100%。更改时没有发生任何问题，删除float:left:）现在呢？
<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:info.awolindustries@gmail.com'" 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>