Добавить отступы, не перемещая элемент - PullRequest
Новая
       5

Добавить отступы, не перемещая элемент

0 голосов
/ 26 января 2020

Когда я наводю курсор на мягкий элемент, он немного двигается, как мне сделать его стабильным 

<nav>
  <ul id="nav-ul">
    <li ><a href="#" class="nav-item">Profile</a></li>
    <li ><a href="#" class="nav-item">Home</a></li>
    <li ><a href="#" class="nav-item">Friends</a></li>
    <li ><a href="#" class="nav-item">Notifications</a></li>
  </ul>
</nav>

И это код css 

nav ul li {
    float: right;
    list-style: none;
    padding: 15px;
    padding-left: 40px;

}
.nav-item{
    color: #fff;
    text-decoration: none;
}
.nav-item:hover {
    background-color: #2c3e50;
    padding: 5px;
}

Ответы [ 3 ]

0 голосов
/ 26 января 2020

Вы можете добавить к нему отступы без наведения 

.nav-item {
  padding: 5px;
}
.nav-item:hover {
  background-color: #2c3e50;
}
<nav>
  <ul id="nav-ul">
    <li ><a href="#" class="nav-item">Profile</a></li>
    <li ><a href="#" class="nav-item">Home</a></li>
    <li ><a href="#" class="nav-item">Friends</a></li>
    <li ><a href="#" class="nav-item">Notifications</a></li>
  </ul>
</nav>
0 голосов
/ 26 января 2020

спасибо, ребята, я понял, вам просто нужно добавить отступы к ним обоим 

.nav-item{
    color: #fff;
    text-decoration: none;
    padding: 5px;
}
.nav-item:hover {
    background-color: #2c3e50;
    padding: 5px;
}
0 голосов
/ 26 января 2020

Просто удалите padding: 5px; из вашего css: 

.nav-item {
  padding: 5px;
}

.nav-item:hover {
  background-color: #2c3e50;
}
<nav>
  <ul id="nav-ul">
    <li ><a href="#" class="nav-item">Profile</a></li>
    <li ><a href="#" class="nav-item">Home</a></li>
    <li ><a href="#" class="nav-item">Friends</a></li>
    <li ><a href="#" class="nav-item">Notifications</a></li>
  </ul>
</nav>
...