Wie Sie ein HTML-Element behalten Position intakt und nicht erlauben, seine Position zu ändern

Question

Unten sind 2 Bilder. wenn ich über "Rollen" gehe, möchte ich das Padding erhöhen und möchte auch nicht den "add roles" -Button, um seine Position zu ändern. Gibt es irgendeinen Weg, das zu stoppen?

Wenn ich Rollen Schweben Sie über nicht

Wenn ich über Rollen schweben.

Im Folgenden sind meine HTML und CSS-Codes für Ref

<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

Wenn das, was Sie wollen, ist die Rollen erscheinen größer, wenn schwebte Sie so etwas wie verwenden:

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

statt mit Polsterung

Answer 2

entfernen nur padding on:hover Zustand

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

demo