Html 为什么我的按钮只有一半能用？

我在一个我正在制作的网站上有一些按钮，但是当我把按钮做得更宽时，它们会变得更宽，但是只有前一半是可点击的，我不知道问题出在哪里

这是javascript代码，我认为这不是问题所在

// this is where the main JavaScript and some jQuery runs to make the site work

// variable with your'e money
var money = 0;
var totalTimesClicked = 0;


// Hide all buttons
$("#but1").hide();
$("#but2").hide();
$("#but3").hide();
$("#but4").hide();
$("#but5").hide();
$(".codeLines").hide();

// function used to generate money
function getmoney(income) {
    money = money + income;
}

// automatically makes money untill 100 money
window.setInterval(function(){
    if (money < 100) {
        getmoney(0.1);
    }
// automatically makes money untill 500 money
    else if (money > 100 && money < 500) {
        getmoney(0.05)
    }
    document.getElementById("money").innerHTML = Math.round(money*10)/10;
}, 100)

// make the click to make money button appear when you have more money than 10
var buldings1_appear = setInterval(function(){
if (money >= 9) {
$("#but1").slideDown("slow");
}
// make the auto income button appear when you have more money than 20
if (money >= 20) {
$("#but4").slideDown("slow");
}
},1000)

var clickEffect = 1;
// the click to make money function

$("#but1").click(function(){
    getmoney(clickEffect);
    totalTimesClicked = totalTimesClicked + clickEffect;
        document.getElementById("money").innerHTML = Math.round(money*10)/10;
        document.getElementById("totalTimesClicked").innerHTML = totalTimesClicked;
$("#but2").slideDown("slow");
});

// make more money by clicking on button 1
var clicks = 0;
$("#but2").click(function(){
    var cost = 50;
    var multiplyBut1Cost = Math.floor(cost*Math.pow(1.3,clicks));
    if (money >= multiplyBut1Cost) {
        money = money -  multiplyBut1Cost;
        clickEffect = clickEffect + 1;
        clicks = clicks + 1;    
    document.getElementById("money").innerHTML = Math.round(money*10)/10;
    document.getElementById("clickEffect").innerHTML = clickEffect;
    if (clicks >= 5) {
$("#but3").slideDown("slow");
    }
}
var multiplyBut1NextCost = Math.floor(cost * (Math.pow(1.3, clicks)));
    document.getElementById("multiplyBut1Cost").innerHTML=multiplyBut1NextCost;

})

var but3clicks = 0;
$("#but3").click(function(){
    var cost = 1000;
    var multiplyBut1Cost2 = Math.floor(cost*Math.pow(1.2, but3clicks));
    if (money >= multiplyBut1Cost2) {
        money = money -  multiplyBut1Cost2;
        clickEffect = clickEffect + 5;
        but3clicks = but3clicks + 1;    
    document.getElementById("money").innerHTML = Math.round(money*10)/10;
    document.getElementById("clickEffect").innerHTML = clickEffect;
}
var multiplyBut1NextCost = Math.floor(cost * (Math.pow(1.3, but3clicks)));
    document.getElementById("multiplyBut1Cost2").innerHTML=multiplyBut1NextCost;

})

var effect = 0.1;
var but4income = 0;
var but4bought = 0;
var but4spawned = 0;
function buyBut4(){
    var cost = 25;
    var but4cost = Math.floor(cost*Math.pow(1.2,but4bought));
        if(money>=but4cost){
        but4bought = but4bought+1;
        money = money - but4cost;
        but4income = (but4bought + but4spawned) * effect;
        document.getElementById("but4bought").innerHTML = but4bought;
        document.getElementById("money").innerHTML = money;
if (but4bought >= 5) {
    $("#but5").slideDown("slow");
}

}
    var nextCost = Math.floor(cost*Math.pow(1.2,but4bought));
    document.getElementById("but4cost").innerHTML = nextCost;
};

setInterval(function(){
    getmoney((but4bought + but4spawned) * effect)
document.getElementById("money").innerHTML = Math.round(money*10)/10;

},100)

var but5effect = 0.001;
var but5bought = 0;
var but5income = 0;
function buyBut5(){
    var cost = 1000;
    var but5cost = Math.floor(cost*Math.pow(1.4,but5bought));
        if(money>=but5cost){
        but5bought = but5bought+1;
        money = money - but5cost;
        but5income = but5bought * but5effect;
        document.getElementById("but5bought").innerHTML = but5bought;
        document.getElementById("money").innerHTML = money;
        document.getElementById("but5income").innerHTML = Math.round(but5income * 1000)/100;
    };
    var nextCost = Math.floor(cost*Math.pow(1.4,but5bought));
    document.getElementById("but5cost").innerHTML = nextCost;
};

setInterval(function(){
    but4spawned = but4spawned + but5bought * but5effect; 
    but4income = (but4bought + but4spawned) * effect;
    document.getElementById("but4spawned").innerHTML = Math.round(but4spawned*10)/10;
    document.getElementById("but4income").innerHTML = Math.round(but4income * 100)/10;
},100)





 Window.onload = function supportsLocalStorage() {
      try {
        return 'localStorage' in window && window['localStorage'] !== null;
      } catch(e){
        return false;
      }
    }

function saveGame(){
    localStorage.setItem('money', JSON.stringify(money));
}

function loadGame(){
    money = JSON.parse(localStorage.getItem('money'))
    console.log(localStorage.getItem('money'))
    document.getElementById("money").innerHTML = localStorage.getItem("money");
}

function makeMoneySite(){
    $(".buildings").show("slow");
    $(".upgrades").hide("slow");
}

function upgradesSite(){
    $(".buildings").hide("slow");
    $(".upgrades").show("slow");
}

// Window.onload(loadGame());

或者问题就在这里

增量
你将自动获得1美元，直到你有100美元，0.5美元在200到500美元之间

钱0
点击0赚钱
代码行0


建筑物
升级
威望


保存您的进度
加载上一个游戏







点击这里赚钱通过点击这里你每次点击赚1美元



使单击按钮更好
单击此处可在每次单击上面的单击按钮时多赚1美元，费用为50美元


让点击按钮变得更好
单击此处，每次单击上面的“单击”按钮，可多赚5美元，费用为1000美元




单击此按钮可使自动收入
自动收入成本为25
您购买了0台自动收入机器，并产生了0台but4的
but4每秒总收入为0


单击此处生成but4的
but5的成本为1000
您的0 but5每秒生成0 but4

这里发生了很多事情，也有很多问题。但是一些按钮看起来不可点击的原因是因为你把结构和样式搞砸了

您的

saveButton

元素仅包含一个

absolute

ly定位元素（因此该父元素不清除，并位于“大按钮”父元素的顶部），该元素具有子元素（

li

），子元素位于

块

位置，并在“大按钮”可点击区域“溢出”

老实说，有太多的问题要讨论，每一个都要花很长时间

要解决“点击”问题，您有几个选项：

对于大按钮，添加

位置：相对；z-index:99

或任何更高的

z-index

值-这可能会破坏元素的z定位

对于

.saveButton ul

元素，移除

位置：绝对

对于

.saveButton ul>li

元素，添加

显示：内联块

其中任何一个都可以解决您的问题，但我强烈建议您重新评估

html

结构和

css

样式

---

使用上述技术之一。

这里有很多问题。但是一些按钮看起来不可点击的原因是因为你把结构和样式搞砸了

您的

saveButton

元素仅包含一个

absolute

ly定位元素（因此该父元素不清除，并位于“大按钮”父元素的顶部），该元素具有子元素（

li

），子元素位于

块

位置，并在“大按钮”可点击区域“溢出”

老实说，有太多的问题要讨论，每一个都要花很长时间

要解决“点击”问题，您有几个选项：

对于大按钮，添加

位置：相对；z-index:99

或任何更高的

z-index

值-这可能会破坏元素的z定位

对于

.saveButton ul

元素，移除

位置：绝对

对于

.saveButton ul>li

元素，添加

显示：内联块

其中任何一个都可以解决您的问题，但我强烈建议您重新评估

html

结构和

css

样式

---

使用上述技术之一。

问题在于您对

ul

的定位，其中包含保存游戏和加载以前的游戏链接

<ul>
  <li> <button onclick="saveGame()"> Save your progress</button> </li>
  <li> <button onclick="loadGame()"> Load a previous game</button></li>
</ul>

---

注意：如果您在开发工具中使用Inspect元素，您可以找到每个DOM元素的边界。

问题在于您对

ul

的定位，其中包含保存游戏和加载以前的游戏链接

<ul>
  <li> <button onclick="saveGame()"> Save your progress</button> </li>
  <li> <button onclick="loadGame()"> Load a previous game</button></li>
</ul>

---

注意：如果您在开发人员工具中使用Inspect元素，您可以找到每个DOM元素的边界。

当您有10美元时，该按钮将出现。请将代码示例缩减为a。当您有10美元时，该按钮将出现。请将代码示例缩减为a

<ul>
  <li> <button onclick="saveGame()"> Save your progress</button> </li>
  <li> <button onclick="loadGame()"> Load a previous game</button></li>
</ul>

.saveButton ul{
    margin-top:20%;
}