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的默认button为submit，因此您可以将其删除。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

可以在此处找到有充分理由使用button而不是input type="submit"的Stackoverflow答案：https://stackoverflow.com/a/33663114/5561605

Answer 2

电流：

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

使用以下代码更新html代码：

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

Answer 3

使用

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

按钮文字已经消失

3 个答案: