按鈕文字已消失

我正在嘗試使用提交按鈕創建表單。我試圖將一些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" />

來源

2017-10-10 Bug Catcher

使用button元素而不是div。

請注意，button的默認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>

出現StackOverflow的答案有很好的理由使用button在input type="submit"可以在這裏找到：https://stackoverflow.com/a/33663114/5561605

來源

2017-10-10 15:58:06 sol

當然，它是這麼簡單。我將此標記爲一個答案asap（由於這個時間限制，不能這樣做） –

電流：

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

更新HTML代碼與下面的代碼：

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

來源

2017-10-10 16:00:54

感謝您的代碼片段，它可能會提供一些即時的幫助。通過說明爲什麼這是一個很好的解決方案的問題，可以大大提高（https://meta.stackexchange.com/q/114762）其教育價值，並且可以使未來的讀者更加有用，但不完全相同的問題。請編輯您的答案以添加解釋，並指出適用的限制和假設。 – GrumpyCrouton

使用

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

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

來源

2017-10-10 16:01:31 Gattbha

按鈕文字已消失

回答

相關問題