扩大其他项目的大小时如何保持相同的列表元素大小？答案

【问题标题】：How to maintain the same list element size when enlarging the size of other items?扩大其他项目的大小时如何保持相同的列表元素大小？
【发布时间】：2018-11-15 01:24:17
【问题描述】：

我的 CSS 有问题，我很难说出发生了什么，所以我放了一个 sn-p 来解决这个问题。这些标签应该在悬停时滑过，但只有一个而不是全部三个。

`https://jsfiddle.net/s36ebL75/`

【问题讨论】：

寻求调试帮助的问题必须包含重现它所需的最短代码在问题本身中。 注意 - 请不要滥用代码块来解决这个问题要求.

标签： html css animation icons social

【解决方案1】：

给你。只需添加浮动：对；撇开ul li a

aside ul {
    list-style: none;
    position: fixed;
    top: 50%;
    right: -5px;
    overflow: hidden;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 1vw;
}

aside ul li a {
    display: block;
    height: 5vh;
    width: 5vw;
    border-radius: 5vh 0 0 5vh;
    border: 0.12vw solid #000;
    background: #FFF;
    margin-bottom: 1vh;
    transition: all .4s ease;
    color: #2980b9;
    text-decoration: none;
    line-height: 5vh;
    position: relative;
    float: right;
}

aside ul li a:hover {
    cursor: pointer;
    width: 10vw;
    color: #fff;
}

aside ul li a:hover span {
    left: 3vw;
}

aside ul li a span {
    padding: 0 2vw 0 1vh;
    position: absolute;
    right: -20vw;
    transition: left .4s ease;
}

aside ul li a i {
    position: absolute;
    top: 50%;
    left: 1vw;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

aside ul li .facebook {
    background:rgba(59, 88, 151, 0.4);
    border-color: #3B5998;
    color:#3B5998;
}

aside ul li .facebook:hover {
    background: #3B5998;
}

aside ul li .github {
    background: rgba(117, 117, 117, 0.4);
    border-color: #767676;
    color: #767676;
}

aside ul li .github:hover {
    background: #767676;
}

aside ul li .instagram {
    background: rgba(187, 42, 141, 0.4);
    border-color: #bc2a8d;
}

aside ul li .instagram:hover {
    background: #bc2a8d;
}

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
        crossorigin="anonymous">
<aside>
        <ul>
            <li>
                <a href="#" class="facebook">
                    <span>Facebook</span>
                    <i class="fab fa-facebook-f text-white"></i>
                </a>
            </li>
            <li>
                <a href="#" class="github">
                    <span>GitHub</span>
                    <i class="fab fa-github text-white"></i>
                </a>
            </li>
            <li>
                <a href="#" class="instagram">
                    <span>Instagram</span>
                    <i class="fab fa-instagram text-white"></i>
                </a>
            </li>
        </ul>
    </aside>

【讨论】：

当光标位于两个元素之间时，它可以工作，但有时会出错
Buggy 怎么样？不滑出来吗？