我有一个键盘类型的输入屏幕，但是当我的代码更改显示数字的元素的innerHTML 时，该元素会向下移动一点。为什么要这样做？
这是我的代码:
<!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>我的代码尚未完成，还有一些内容需要更改，我只是采取了所需的内容来找出数字显示向下移动的原因。
感谢您的帮助!
最佳答案
这是因为您的 floating-box_input 元素为空。这是 inline-block 元素已知的。请参阅this .
如果您要向元素添加空内容，您会发现当您单击数字时它们不会发生变化。空的 inline-block 元素的对齐方式不同。
我修改了您的脚本，以便您可以看到我在说什么。正确的解决方案是使用 vertical-align，甚至更好的是 flexbox。
<!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>关于javascript - 更改 innerHTML 时 Div 元素会移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49616861/