侧边栏上的图示横跨整个侧边栏-编程知识-白鹭情

我是 HTML/CSS 新手，遇到了一个问题，找不到解决方案。我想要一个侧边栏，我设法做到了。此侧边栏中有 5 个导航图示。现在，我的问题是我希望图示均匀地分布在侧边栏上以完全填充它，而不是在它们之间或下方留下空间。（我还希望侧边栏在顶部和底部有均匀的间距，但也不能这样做。）我的 HTML：

body{
    background: #1A1A1A;
    height: 100%;
    overflow: hidden;
}
.side_bar{
    background: linear-gradient(to bottom, #1A0066, #7B1685);
    opacity: 0.7;
    height: 93%;
    width: 80px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    margin: 20px 10px;
    overflow: hidden;
    border-radius: 20px;
}
.side_bar a{
    display: block;
    text-align: center;
    padding:  30% 10px;
    font-size: 40px;
    transition: all 0.4s ease;
    color: #6944DA;
}
.side_bar a:hover{
    background-color: #5A315E;
}
.active_icon{
    background-color: #6F119D;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

<div class="side_bar">
    <a class="active_icon" href="#">
        <i class="fa fa-home"></i>
    </a>
    <a href="#">
        <i class="fa fa-home"></i>
    </a>
    <a href="#">
        <i class="fa fa-home"></i>
    </a>
    <a href="#">
        <i class="fa fa-home"></i>
    </a>
    <a href="#">
        <i class="fa fa-home"></i>
    </a>
</div>

</body>
</html>

我希望有人可以帮助我。干杯!

uj5u.com热心网友回复：

您可以使用弹性盒。您正在使 side_bar 类 flex 并且您可以使用 flex-direction 使它们垂直（https://developer.mozilla.org/fr/docs/Web/CSS/flex-direction）。

uj5u.com热心网友回复：

使用flex您可以在此处实作此目的：

body{
    background: #1A1A1A;
    height: 100%;
    overflow: hidden;
}
.side_bar{
    background: linear-gradient(to bottom, #1A0066, #7B1685);
    opacity: 0.7;
    height: 93%;
    width: 80px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    margin: 20px 10px;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.side_bar a{
    text-align: center;
    font-size: 40px;
    transition: all 0.4s ease;
    color: #6944DA;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.side_bar a:hover{
    background-color: #5A315E;
}
.active_icon{
    background-color: #6F119D;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

<div class="side_bar">
    <a class="active_icon" href="#">
        <i class="fa fa-home"></i>
    </a>
    <a href="#">
        <i class="fa fa-home"></i>
    </a>
    <a href="#">
        <i class="fa fa-home"></i>
    </a>
    <a href="#">
        <i class="fa fa-home"></i>
    </a>
    <a href="#">
        <i class="fa fa-home"></i>
    </a>
</div>

</body>
</html>