更改innerHTML时，Div元素会移动

时间：2018-04-02 18:41:12

标签： javascript html css

我有一个键盘输入屏幕但是当我的代码更改显示数字的元素的innerHTML时，元素会向下移动一点。为什么这样做？

这是我的代码：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<head>
<style>
body{
	width:480px;
	height:800px;
}
.keypad {
	background-color: rgb(77, 77, 77);
    border: 2px solid rgb(64, 64, 64);
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 48px;
    margin: 15px 20px;
    cursor: pointer;
    width:80px;
    height:80px;
}
.keypad1{border-radius: 50%;}

.floating-box_input{
	background-color: rgb(77, 77, 77);
	display: inline-block;
	width: 60px;
	height: 90px;
	border: 6px solid rgb(64, 64, 64);
	margin: 10px 20px;
	font-size: 96px;
	line-height: 90px;
}
</style>
</head>
<body>

  <div style="text-align:center;">
    <div class="floating-box_input" id="1"></div>
    <div class="floating-box_input" id="2"></div>
    <div class="floating-box_input" id="3"></div>
    <div class="floating-box_input" id="4"></div>

    <button class="keypad keypad1" onclick="inputDigit('1')">1</button>
    <button class="keypad keypad1" onclick="inputDigit('2')">2</button>
    <button class="keypad keypad1" onclick="inputDigit('3')">3</button>
    <button class="keypad keypad1" onclick="inputDigit('4')">4</button>
    <button class="keypad keypad1" onclick="inputDigit('5')">5</button>
    <button class="keypad keypad1" onclick="inputDigit('6')">6</button>
    <button class="keypad keypad1" onclick="inputDigit('7')">7</button>
    <button class="keypad keypad1" onclick="inputDigit('8')">8</button>
    <button class="keypad keypad1" onclick="inputDigit('9')">9</button>
    <button class="keypad keypad1" onclick="inputDigit('0')" style="margin-left:144px;">0</button>
    <button class="keypad keypad1" onclick="deleteNum()">
		<i class="material-icons" style="font-size:40px; color:white;">backspace</i>
	</button>
  </div>
  <script>
    function inputDigit(numIn) {
      var curr = 1;

      while (document.getElementById(curr).innerHTML != "") {
        curr++;
        if (curr == 12) {
          break;
        }
      }
      if (curr == 12) {
        return;
      } else {
        document.getElementById(curr).innerHTML = numIn;
      }
    }

    function deleteNum() {
      var i;
      for (i = 4; i >= 1; i--) {
        if (document.getElementById(i).innerHTML == "") {
          continue;
        } else {
          document.getElementById(i).innerHTML = "";
          break;
        }
      }
    }
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

我的代码还没有完成，有些事情需要改变，我只需要拿出所需的东西来弄清楚为什么数字显示会向下移动。

感谢您的帮助！

2 个答案:

答案 0 :(得分：1)

您可以将文字对齐到顶部或底部，以确保添加文字时div不会移动。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<head>
<style>
body{
	width:480px;
	height:800px;
}
.keypad {
	background-color: rgb(77, 77, 77);
    border: 2px solid rgb(64, 64, 64);
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 48px;
    margin: 15px 20px;
    cursor: pointer;
    width:80px;
    height:80px;
}
.keypad1{border-radius: 50%;}

.floating-box_input{
	background-color: rgb(77, 77, 77);
	display: inline-block;
	width: 60px;
	height: 90px;
	border: 6px solid rgb(64, 64, 64);
	margin: 10px 20px;
	font-size: 96px;
	line-height: 90px;
  vertical-align:top;
}
</style>
</head>
<body>

  <div style="text-align:center;">
    <div class="floating-box_input" id="1"></div>
    <div class="floating-box_input" id="2"></div>
    <div class="floating-box_input" id="3"></div>
    <div class="floating-box_input" id="4"></div>

    <button class="keypad keypad1" onclick="inputDigit('1')">1</button>
    <button class="keypad keypad1" onclick="inputDigit('2')">2</button>
    <button class="keypad keypad1" onclick="inputDigit('3')">3</button>
    <button class="keypad keypad1" onclick="inputDigit('4')">4</button>
    <button class="keypad keypad1" onclick="inputDigit('5')">5</button>
    <button class="keypad keypad1" onclick="inputDigit('6')">6</button>
    <button class="keypad keypad1" onclick="inputDigit('7')">7</button>
    <button class="keypad keypad1" onclick="inputDigit('8')">8</button>
    <button class="keypad keypad1" onclick="inputDigit('9')">9</button>
    <button class="keypad keypad1" onclick="inputDigit('0')" style="margin-left:144px;">0</button>
    <button class="keypad keypad1" onclick="deleteNum()">
		<i class="material-icons" style="font-size:40px; color:white;">backspace</i>
	</button>
  </div>
  <script>
    function inputDigit(numIn) {
      var curr = 1;

      while (document.getElementById(curr).innerHTML != "") {
        curr++;
        if (curr == 12) {
          break;
        }
      }
      if (curr == 12) {
        return;
      } else {
        document.getElementById(curr).innerHTML = numIn;
      }
    }

    function deleteNum() {
      var i;
      for (i = 4; i >= 1; i--) {
        if (document.getElementById(i).innerHTML == "") {
          continue;
        } else {
          document.getElementById(i).innerHTML = "";
          break;
        }
      }
    }
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这是因为您的floating-box_input元素为空。这是inline-block元素的已知信息。请参阅this。

如果您要在元素中添加空白内容，您会发现单击这些数字时它们不会发生变化。空inline-block个元素的对齐方式不同。

我修改了你的脚本，这样你就可以看到我正在谈论的内容。一个合适的解决方案是使用vertical-align，甚至更好，flexbox。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<head>
<style>
body{
	width:480px;
	height:800px;
}
.keypad {
	background-color: rgb(77, 77, 77);
    border: 2px solid rgb(64, 64, 64);
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 48px;
    margin: 15px 20px;
    cursor: pointer;
    width:80px;
    height:80px;
}
.keypad1{border-radius: 50%;}

.floating-box_input{
	background-color: rgb(77, 77, 77);
	display: inline-block;
	width: 60px;
	height: 90px;
	border: 6px solid rgb(64, 64, 64);
	margin: 10px 20px;
	font-size: 96px;
	line-height: 90px;
}
</style>
</head>
<body>

  <div style="text-align:center;">
    <div class="floating-box_input" id="1">&nbsp;</div>
    <div class="floating-box_input" id="2">&nbsp;</div>
    <div class="floating-box_input" id="3">&nbsp;</div>
    <div class="floating-box_input" id="4">&nbsp;</div>

    <button class="keypad keypad1" onclick="inputDigit('1')">1</button>
    <button class="keypad keypad1" onclick="inputDigit('2')">2</button>
    <button class="keypad keypad1" onclick="inputDigit('3')">3</button>
    <button class="keypad keypad1" onclick="inputDigit('4')">4</button>
    <button class="keypad keypad1" onclick="inputDigit('5')">5</button>
    <button class="keypad keypad1" onclick="inputDigit('6')">6</button>
    <button class="keypad keypad1" onclick="inputDigit('7')">7</button>
    <button class="keypad keypad1" onclick="inputDigit('8')">8</button>
    <button class="keypad keypad1" onclick="inputDigit('9')">9</button>
    <button class="keypad keypad1" onclick="inputDigit('0')" style="margin-left:144px;">0</button>
    <button class="keypad keypad1" onclick="deleteNum()">
		<i class="material-icons" style="font-size:40px; color:white;">backspace</i>
	</button>
  </div>
  <script>
    function inputDigit(numIn) {
      var curr = 1;

      while (document.getElementById(curr).innerHTML != "&nbsp;") {
        curr++;
        if (curr == 12) {
          break;
        }
      }
      if (curr == 12) {
        return;
      } else {
        document.getElementById(curr).innerHTML = numIn;
      }
    }

    function deleteNum() {
      var i;
      for (i = 4; i >= 1; i--) {
        if (document.getElementById(i).innerHTML == "") {
          continue;
        } else {
          document.getElementById(i).innerHTML = "";
          break;
        }
      }
    }
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题