Question

尝试写出更好的问题，所以这里就是。

我有5个标签可以正常工作，悬停时会放大。在悬停之前，如何摆脱选项卡之间的空间，以便标签彼此相邻？

我已经尝试过所有我认识并研究过的东西，但我还是无法弄明白。

上方的颜色框

这是我的css：

.nav.nav-justified > li > a > img { 
    max-width: 100%; 
    opacity: 1;
    -webkit-transform: scale(.9,.9);
            transform: scale(.9,.9);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img { 
     opacity: 1; 
    -webkit-transform: none;
            transform: none;
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tab-pane .tab-inner { padding: 30px 0 20px; }
.tab-li-a {padding:0 !important;}

Answer 1

这有效

.nav.nav-justified > li > a > img { 
transition: all .2s ease-in-out;
}

.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img { 
    transform: scale(1.1);
    margin-right:31px;
}

Answer 2

进行以下更改，它将提供所需的输出。

.nav.nav-justified > li > a > img {
    max-width: 100%;
    opacity: 1;
    /* -webkit-transform: scale(.9,.9); */
    /* transform: scale(.9,.9); */
    /* -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    /* transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}

使用变换和立方贝塞尔展开选项卡

2 个答案: