Question

由于某些原因，我的按钮不会水平对齐...我不明白什么是错的。我的按钮都是内联块。第一个图像显示带有按钮的网站，第二个图像显示没有按钮的网站，这样您就可以理解我在说什么。非常感谢:)。

我的HTML：

<center>
<div id="menu"> 
    <form>
        <input class="MyButton" type="button" value="About us" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Events" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Sign up" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Volunteer" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Contact" onclick="F:\practice website's\About us.html">
    </form>
</div>

我的CSS：

a:link{
        text-decoration: none;
        color: rgba(250,250,250,0.5);
    }
    a:visited{
        text-decoration: none;
        color: rgba(250,250,250,0.5);
    }
    input.MyButton {
        display: inline-block;
        width: 80px;
        height: 20px;
        font-weight: bold;
        background: rgba(0,0,0,0.5);
        color: rgba(250,250,250,0.5);
        cursor: pointer;
        border-radius: 10px;
        border: none;
    }
    #menu{
        display: inline-block;
    }

This is how it appears

This is how it should appear

Answer 1

说真的，不要使用输入元素和JavaScript来使用普通锚标记来实现。

＆＃13;

a:link {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
a:visited {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
#menu a {
  display: inline-block;
  width: 80px;
  height: 20px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(250, 250, 250, 0.5);
  border-radius: 10px;
  border: none;
  text-align:center;
  padding: 5px;
}
#menu {
  width: 100%;
  text-align: center;
}

＆＃13;

<div id="menu">
  <a href="about_us.html">About us</a>
  <a href="sign_up.html">Sign up</a>
  <a href="events.html">Events</a>
  <a href="volunteer.html">Volunteer</a>
  <a href="contact.html">Contact</a>
</div>

＆＃13;

另外，正如Paulie_D所述，<center>标记已被弃用。您可以使用CSS来居中元素，就像我在我的示例中所做的那样（div＃menu）。

Answer 2

首先，Links are not buttons & vice versa

在您的情况下，您为form使用了input。

只需使用一个form将它们全部包裹起来。

＆＃13;

a:link {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
a:visited {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
input.MyButton {
  display: inline-block;
  width: 80px;
  height: 20px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(250, 250, 250, 0.5);
  cursor: pointer;
  border-radius: 10px;
  border: none;
}
#menu {
  display: inline-block;
}

＆＃13;

<div id="menu">
  <form>
    <input class="MyButton" type="button" value="About us" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Events" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Sign up" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Volunteer" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Contact" onclick="F:\practice website's\About us.html">
  </form>
</div>

＆＃13;

顺便说一句<center>已被弃用了一段时间，不再使用了。我很惊讶它还在上升。

Answer 3

原因是form标记是块级元素，它通常包含其他块级元素，因此在这种情况下1 form标记就足够了。

<form>
    <input class="MyButton" type="button" value="About us" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Events" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Sign up" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Volunteer" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Contact" onclick="F:\practice website's\About us.html">
</form>

另外，考虑不要在你的html中使用onclick以及其他内联javascript，因为它被认为是整体的不良做法，而是考虑这个例子。请注意，这应包含在<script></script>标记内。

document.getElementById("myBtn").addEventListener("click", displayDate);

请注意，在您的示例中，您根本不需要任何JS，而您在那里所做的事情被认为是非常糟糕的做法。接近的方法如下。

<a href="path/other/file" class="myButton">Home</a>

当网站在必要时使用JavaScript时，因为这个世界上仍有人默认禁用JS，所以你也需要考虑它们。

Answer 4

您的按钮看起来像是链接而不是您想要提交数据的表单。因此，将每个表单更改为链接

<a href="AboutUs.html">
    <input class="MyButton" type="button" value="About us" />
</a>

然后您也可以考虑删除该按钮，然后设置a的样式，或者在此设置span或div。

我的按钮为什么不对齐？

4 个答案: