更改innerHTML时，div元素移动 [英] Div element moves when changing the innerHTML
本文介绍了更改innerHTML时，div元素移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个键盘类型的输入屏幕，但是当我的代码更改显示数字的元素的innerHTML时，该元素会向下移动一点.为什么这样做?
I have a keypad type input screen but when my code changes the innerHTML of the element where the number is displayed, the element shifts down a bit. Why is it doing that?
这是我的代码:
<!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>我的代码还没有完成，有些事情需要更改，我只是拿出了需要弄清楚数字显示为什么向下移动的东西.
My code isn't finished and there are some things that need to be changed, I just took what was needed to figure out why the number display is shifting down.
感谢您的帮助！
推荐答案
您可以将文本对齐到顶部或底部，以确保添加文本时div不会移动.
You can align the text to the top or bottom to make sure the divs won't move when the text is added.
<!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>这篇关于更改innerHTML时，div元素移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
