如何保持Html元素的位置不变，不允许改变其位置

Question

以下是2张图片。当我跳过＆＃34;角色＆＃34;我想增加填充，也不想要＆＃34;添加角色＆＃34;按钮改变它的位置。有没有办法阻止它。

当我不要将鼠标悬停在角色上

当我将鼠标悬停在角色上时。

以下是我的参考的HTML和CSS代码

<ul class="tab-group">
    <li class="tab active"><a href="#roles">Roles</a></li>
    <li class="tab "><a href="#user">User</a></li>
</ul>
<ul class="tab-onebtn">
    <li class="logouttab"> <a href="<?php echo base_url(); ?>Login/logout" style="float: left;"> Add Role </a> </li>
</ul>

CSS

.tab-group {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.tab-group:after {
    content: "";
    display: table;
    clear: both;
}

.tab-group li a {
    display: block;
    text-decoration: none;
    background: rgba(160, 179, 176, 0.25);
    color: #a0b3b0;
    font-size: 20px;
    float: left;
    width: 14.25%;
    text-align: center;
    cursor: pointer;
    -webkit-transition: .5s ease;
    transition: .5s ease;
}

.tab-group li a:hover {
    background: #179b77;
    color: #ffffff;
    padding: 8px;
}

.tab-group .active a {
    background: #1ab188;
    color: #ffffff;
}

.tab-content>div:last-child {
    display: none;
}

Answer 1

只需删除填充on:hover状态

.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
  /*padding: 8px;*/
}

<强> demo

Answer 2

如果您想要的是角色在悬停时显得更大，您可以使用以下内容：

.tab-group li a:hover {
   background: #179b77;
   color: #ffffff;
   transform:scale(1.1);
}

而不是添加填充