html - 按钮文字消失了

Question

我正在尝试创建一个带有提交按钮的表单。我正在尝试将一些 css 应用于样式表中的按钮，但由于某种原因文本从按钮中消失了! 当我从样式表中删除所有 css(或从 div 中删除 id)时，按钮完全消失，而不是转到默认样式。谁能告诉我我做错了什么？

HTML:

    #submit 
    {
        background-color: #5AB753;
        color: black;
        text-align: left;
        border: none;
        border-radius: 5px;
        position: absolute;
        left: 683px;
        top: 500px;
        width: 170px;
        height: 51px;
        font-family: 'Lato';
        text-align: center;
        font-size: 30px;
        color: #FFFFFF;
        float: left;
    }

    #submit:hover 
    {
        background-color: #96D091;
        float: left;
    }

    <div id="submit" type="submit" value="Join now" />

Answer 1

使用 button 元素代替 div。

请注意，按钮 的默认type 是submit，因此您可以将其删除。

#submit {
  background-color: #5AB753;
  color: black;
  text-align: left;
  border: none;
  border-radius: 5px;
  position: absolute;
  left: 683px;
  top: 500px;
  width: 170px;
  height: 51px;
  font-family: 'Lato';
  text-align: center;
  font-size: 30px;
  color: #FFFFFF;
  float: left;
}

#submit:hover {
  background-color: #96D091;
  float: left;
}

<button id="submit">Join now</button>

在 input type="submit" 上使用 button 的充分理由的 Stackoverflow 答案可以在这里找到:https://stackoverflow.com/a/33663114/5561605