Элемент Div перемещается при изменении innerHTML

У меня есть экран ввода типа клавиатуры, но когда мой код изменяет 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>

Мой код не закончен, и есть некоторые вещи, которые нужно изменить, я просто взял то, что было необходимо, чтобы выяснить, почему отображение числа смещается вниз.

Спасибо за вашу помощь!

javascript html css

02.04.2018 20:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 116

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете выровнять текст по верхнему или нижнему краю, чтобы убедиться, что блоки div не перемещаются при добавлении текста.

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

02.04.2018 20:46

Это потому, что ваши элементы floating-box_input пусты. Это известно для элементов inline-block. См. это.

Если вы добавите к своим элементам пустой контент, вы заметите, что они не меняются, когда вы щелкаете числа. Пустые элементы 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">&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>

02.04.2018 20:57

Другие вопросы по теме

Форма для загрузки файла в веб-API, для которого требуется настраиваемый заголовок

Видео HTML5 не воспроизводится автоматически?

Сделайте расширяемый поиск уместным в пространстве

Как я могу ссылаться на объект скрипта в html <div>?

Работа с пользовательским вводом HTML

Как применить стиль для HTML, введенного в компонент Angular с помощью innerHtml?

Список фильтров с использованием javascript

Запуск React.js без npm (только с локальными файлами React.js или CDN)

Как заставить div двигаться медленно с помощью inline-block

JSF Primefaces загружает / обрабатывает / загружает все на одной странице, которая позволяет загружать после загрузки

Элемент Div перемещается при изменении innerHTML

Ответы 2

Другие вопросы по теме

Похожие вопросы