html - 使用 <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;
}

干杯!