侧边栏上的图标横跨整个侧边栏答案

【问题标题】：Icons on sidebar stretch across whole sidebar侧边栏上的图标横跨整个侧边栏
【发布时间】：2022-01-11 10:49:55
【问题描述】：

我是 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>

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

【问题讨论】：

标签： html css icons sidebar

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用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>

mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

【讨论】：

嗨@Hyron，如果这个或任何答案解决了您的问题，请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。