javascript - 如何保持 Html 元素 Position 完整且不允许更改其位置

Question

下面是 2 张图片。当我悬停在“Angular 色”上时，我想增加填充，也不希望“添加 Angular 色”按钮改变其位置。有什么办法可以阻止它。

当我不将鼠标悬停在 Angular 色上时

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

下面是我的 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

如果你想要的是 Angular 色在悬停时显得更大，你可以使用类似的东西:

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

而不是添加填充