Как контролировать div при наведении:?

Question

Я нашел способ изменить цвет фона пункта меню при наведении курсора.Тем не менее, когда вы наводите параметр, он занимает какое-то широкое пространство, которое перемещает все остальные параметры вправо, это своего рода раздражает, я хочу сохранить постоянное пространство, поэтому, если я наведите курсор, должен измениться только цвет, а неВариант перемещения вправо.В некотором роде Facebook имеет свои пункты меню.

Ниже приведен код:

  <div id="menu">
  <a href="/hello" id="option">home</a>
  <a href="/hello" id="option">profile</a>
  <a href="/hello" id="option">account</a>
  <a href="/hello" id="option">settings</a>
  <a href="/hello" id="option">extra</a>
  <a href="/hello" id="option">logout</a>
  </div>

CSS:

  div#menu {
  margin-left: 630px;
  margin-top:-20px;
  }
  option {
  margin-left: 20px;
  }
  #option:hover{
  background: #3F2327;
  padding: 10px;
  }

Answer 1

Удалить padding: 10px;

Пробел вокруг элемента занимает место, поэтому, если вам не нужен пробел, не добавляйте его. Если вы хотите это все время, добавляйте это все время, а не только для :hover

---

Кроме того, не имеет отношения к вашей проблеме, но только хорошие практики:

• Если вы используете браузер, который не поддерживает CSS, выключен или не является графическим, вы получите настройки учетной записи домашнего профиля, дополнительный выход - у вас есть список ссылок, используйте список разметки . Существует множество советов, как сделать его красивым .
• Идентификатор должен быть уникальным в документе, используйте его только для идентификации определенного элемента. Используйте атрибут class, если хотите указать, что все элементы являются членами одного класса.
• Избегайте использования имен классов и идентификаторов, которые совпадают с элементами HTML , это просто делает код запутанным

Answer 2

1) Вам не хватает # в "option"

2) Почему вы используете padver?Это вызовет движение, когда вы будете парить над ним.