stackoom
  简体   繁体   中英

Div element moves when changing the innerHTML

 原文  2018-04-02 18:41:11  0   2    javascript/ html/ css

Question

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?

Here is my code: 

 <!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.

Thanks for your help!

2 answers

solution1
 1 ACCPTED  2018-04-02 18:46:03

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>

solution2
 1  2018-04-02 18:57:35

This is because your floating-box_input elements are empty. This is know for inline-block elements. See this .

If you were to add empty content to your elements, you will notice that they don't change when you click the numbers. Empty inline-block elements are aligned differently.

I modified your script so you can see what I'm talking about. A proper solution would be to use vertical-align , or even better, 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">&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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question ScrollTop and ScrollTo Not working when changing innerHtml in a Div Get InnerHTML of Changing Div innerHTML not changing div output Changing Div content with innerHTML Adding a DOM element by changing innerHtml of a div prevents it to be found later with getElementById? Changing height of element moves element outside of viewport when page is scrolled preserve cursor position when changing innerHTML in a contenteditable div Chrome getRangeAt issue when programmatically changing the innerHTML of a contenteditable div Changing the innerHTML of a certain element when a special picture of a randomised array appears text moves out of div when I change element display
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM