我是 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>mdn：https : //developer.mozilla.org/en-US/docs/Web/CSS/flex
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408408.html
標籤：