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

Question

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

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

Answer 1

你走了。只需添加float：right;抛开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>