HTML编号输入不允许我选择它

Question

我正在进行个人挑战，在网页上制作可编辑的D＆amp; D角色表。当然，这涉及大量的数字输入，并且我transform: translate; {{}}将所有数字输入到我想要的位置，然而，其中一个输入（＆＃39; AC＆＃ 39;在下面的代码段中）当我将光标悬停在其上时，不允许我编辑其中的信息。

当我将鼠标悬停在它的左上角时，它只是简单地让我改变了一切

当我发表评论float: left及其transform: translate时，它最终会出现在＆＃39;计划之下。元件。这与它有什么关系吗？

＆＃13;

＆＃13;

.third-column {
  transform: translate(0px, 265px);
  width: 33%;
  float: left;
}

#ac {
  float: left;
  transform: translate(77px, -50px);
  border: none;
  background: none;
  width: 50px;
  font-size: 30px;
  text-align: center;
}

#initiative {
  transform: translate(-25px, -48px);
  font-size: 40px;
}

#speed {
  transform: translate(133px, -107px);
  font-size: 40px;
}

.hit-points {
  display: block;
}

#max-hp {
  transform: translate(73px, -60px);
  width: 190px;
  height: 20px;
  background: none;
  border: none;
}

#hp {
  transform: translate(8px, -50px);
  text-align: center;
  font-size: 40px;
  width: 300px;
  border: none;
}

#temp-hp {
  transform: translate(8px, -3px);
  text-align: center;
  font-size: 40px;
  width: 300px;
  border: none;
}

.hd {
  transform: translate(-70px, 45px);
}

#hit-type {}

#hit-dice {
  transform: translate(-13px, 10px);
  width: 140px;
  text-align: center;
  font-size: 25px;
  border: none;
}

.death-saves {
  transform: translate(133px, -9px);
}

.death-save {
  margin-bottom: 14px;
  margin-right: 10px;
}

.atk-spell {}

#attacks {
  transform: translate(40px, 73px);
}

#attacks tr {
  height: 30px;
}

.weaponName {
  margin-bottom: 9px;
  width: 130px;
  background: none;
  border: none;
}

.atkBonus {
  margin-bottom: 9px;
  margin-left: 20px;
  text-align: center;
  width: 60px;
  background: none;
  border: none;
}

.damageType {
  margin-bottom: 13px;
  margin-left: 0px;
  width: 120px;
  background: none;
  border: none;
}

.otherAtks {
  transform: translate(6px, 83px);
  resize: none;
  width: 358px;
  height: 225px;
  background: none;
  line-height: 23px;
  border: none;
}

.equipment {
  transform: translate(35px, 152px);
}

#mons {
  transform: translate(-6px, -10px);
  list-style: none;
  float: left;
  width: auto;
}

.money {
  width: 50px;
  float: left;
  margin-bottom: 22px;
  text-align: center;
  font-size: 20px;
  background: none;
  border: none;
}

#mons li {}

#equip {
  transform: translate(8px, -30px);
  float: left;
  resize: none;
  width: 256px;
  height: 342px;
  background: none;
  line-height: 23px;
  border: none;
}

＆＃13;

<div class="third-column">

  <!-- Armor Class -->
  <input type="number" id="ac" value="0" name="armor-c">

  <!-- initiative -->
  <p id="initiative"></p>

  <!-- Speed -->
  <p id="speed">0ft</p>

  <!-- Hit Points -->
  <div class="hit-points">
    <input type="number" name="max-hp" value="0" id="max-hp">
    <br>
    <input type="number" name="hp" value="0" id="hp">
    <br>
    <input type="number" name="temp-hp" value="0" id="temp-hp">
  </div>

  <!-- Hit Dice -->
  <div class="hd">
    <p id="hit-type">1d8</p>
    <input type="number" id="hit-dice" value="1">
  </div>

  <!-- Death Saves -->
  <div class="death-saves">
    <input type="checkbox" name="success1" class="death-save">
    <input type="checkbox" name="success2" class="death-save">
    <input type="checkbox" name="success3" class="death-save" id="success3">
    <br>
    <input type="checkbox" name="fail1" class="death-save">
    <input type="checkbox" name="fail2" class="death-save">
    <input type="checkbox" name="fail3" class="death-save" id="fail3">
  </div>

  <!-- Attacks -->
  <div class="atk-spell">
    <table id="attacks">
      <thead></thead>
      <tbody>
        <tr>
          <td><input type="text" class="weaponName" id="wn1" value=""></td>
          <td><input type="number" class="atkBonus" id="ab1" value="0"></td>
          <td><input type="text" class="damageType" id="dt1" value=""></td>
        </tr>
        <tr>
          <td><input type="text" class="weaponName" id="wn2" value=""></td>
          <td><input type="number" class="atkBonus" id="ab2" value="0"></td>
          <td><input type="text" class="damageType" id="dt2" value=""></td>
        </tr>
        <tr>
          <td><input type="text" class="weaponName" id="wn3" value=""></td>
          <td><input type="number" class="atkBonus" id="ab3" value="0"></td>
          <td><input type="text" class="damageType" id="dt3" value=""></td>
        </tr>
      </tbody>
    </table>
    <textarea name="name" class="otherAtks"></textarea>
  </div>

  <!-- Money and Equipment -->
  <div class="equipment">
    <ul id="mons">
      <li><input type="number" class="money" id="copper" value="0"></li>
      <li><input type="number" class="money" id="silver" value="0"></li>
      <li><input type="number" class="money" id="E" value="0"></li>
      <li><input type="number" class="money" id="gold" value="0"></li>
      <li><input type="number" class="money" id="plat" value="0"></li>
    </ul>
    <textarea id="equip"></textarea>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;