使用<form>的导航按钮不会显示在中心

Question

出于某种原因，我无法使导航按钮以全宽显示。我试图给元素的宽度为100％，989px（即100％）或小于该宽度，只导致按钮在左侧显示在彼此之下。 谢谢你的帮助：）

nav {
  display: block;
  margin: auto 0;
  text-align: center;
  width: 100%;
}

.nav {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.button {
  width: 15%;
  height: 50px;
  font-size: 20px;
  background-color: #ffffda;
  border-color: #ffffda;
  text-decoration-color: #49156e;
}

<nav>
  <form class="nav" action="index.html"><input class="button" type="submit" value="Home"></form>
  <form class="nav" action="tours.html"><input class="button" type="submit" value="Tours"></form>
  <form class="nav" action="guides.html"><input class="button" type="submit" value="Guides"></form>
  <form class="nav" action="contactUs.html"><input class="button" type="submit" value="Contact Us"></form>
</nav>

结果

Answer 1

对不起伙计们，我只是想出来了！

我的.button的宽度与.nav的宽度有关，因为我只给它15％，它只显示了15％的宽度。我现在已将按钮的宽度设置为150px，它看起来就像它需要的样子:)

.button  {
width: 150px;
height: 50px;
font-size: 20px;
background-color: #ffffda;
border-color: #ffffda;
text-decoration-color: #49156e;
}

干杯们!!