我在頁面上看到兩個沒有文字的按鈕。這些按鈕沒有出現在我撰寫的代碼中，也沒有出現在頁面的源代碼中。
當我檢查控制臺/使用檢查元素時，我看到兩個<button>標簽在開始標簽和結束標簽之間有一個空格。
我嘗試在 JSFiddle 中運行它并且得到了同樣的東西，所以我懷疑它到底是什么。
我很困惑，希望得到一些幫助。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Clicker Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div>
<h1 class="title">Clicker Game</h1>
<h2 class="title">Level: 0</h2>
<h2 class="title">Skill Points: 0</h2>
</div>
<div>
<div id="skillsContainer">
<button id="strength" onclick="strength()"><p class="center"><strong>Strength</strong></p><button>
<button id="expandButton" onclick="expandSkills()"><p class="center"><strong>Expand</strong></p></button>
<button id="minion" onclick="minion()"><p class="center"><strong>Minion</strong></p><button>
</div>
<button id="xpButton" onclick="xpAdd()"><p class="center"><strong>Click Me!</strong></p></button>
</div>
</div>
</body>
</html>
CSS：
.title {
display: flex;
justify-content: center;
}
#xpButton {
display: flex;
justify-content: flex-end;
margin-left: auto;
margin-top: 100px;
margin-right: 15%;
cursor: pointer;
height: 150px;
width: 150px;
border: 2px solid green;
border-radius: 10px;
background-color: white;
color: green;
}
#xpButton:hover {
background-color: green;
color: white;
}
.flex {
display: flex;
}
#skillsContainer {
margin-left: 350px;
margin-top: 0px;
}
#strength {
height: 100px;
display: none;
margin-top: 175px;
cursor: pointer;
}
#minion {
height: 100px;
display: none;
margin-top: 175px;
cursor: pointer;
}
#expandButton {
height: 100;
display: flex;
cursor: pointer;
}
.center {
display: flex;
margin: auto;
}
uj5u.com熱心網友回復：
使用標記驗證器。您的 HTML 中有很多錯誤。
特別是，按鈕元素不允許包含段落，您看到的效果是瀏覽器試圖從該錯誤中恢復。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432840.html
下一篇：輸入文本框獲得焦點時有邊框