英文:
Start the text on different column from same point
问题
我目前正在尝试创建一个侧边栏，一切都按计划进行，但FontAwesome图标没有对齐到同一点，看起来很奇怪，尝试了各种方法，但效果不佳，所以在这里寻求一些帮助。
请在全屏查看代码片段，以查看每列FontAwesome图标的混乱问题。
.side_bar {
font-family: 'Montserrat', sans-serif;
position: fixed;
height: 100%;
background-color: #fff;
overflow: hidden;
transition: width 0.2s linear;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.5);
width: 310px;
}
.side_bar ul {
list-style: none;
display: table;
}
.side_bar li {
padding: 1rem;
width: 300px;
display: table;
}
.side_bar i {
padding-right: 1rem;
}
.side_bar li span {
margin-left: 0.7rem;
}
li:has(div.down) {
position: relative;
overflow: hidden;
height: 0px;
transition: height 1s linear;
}
.down {
font-size: 0.7rem;
font-weight: bold;
margin-left: 4rem;
margin-top: 1rem;
border-left: 3px solid rgb(195, 190, 190);
padding-left: 2rem;
padding-bottom: 2rem;
position: absolute;
}
.down>p {
margin-top: 1rem;
color: grey;
}
li:has(div.down):hover {
height: var(--prog);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet">
<div class="side_bar">
<ul>
<li style="--prog: 180px;">
<i class="fa-solid fa-chart-line"></i>
<span>Promotion</span>
<div class="down">
<p>Add funds</p>
<p>Your sites</p>
<p>Statistics</p>
<p>Paid e-mail</p>
</div>
</li>
<li style="--prog: 340px;">
<i class="fa-solid fa-sack-dollar"></i>
<span>Earning</span>
<div class="down">
<p>Surfing</p>
<p>Social tasks</p>
<p>VIP tasks</p>
<p>Mailbox</p>
<p>Referals</p>
<p>Withdraw funds</p>
<p>Blocked sites</p>
<p>Statistics</p>
<p>Execution history</p>
</div>
</li>
<li>
<i class="fa-regular fa-user"></i>
<span>Account</span>
</li>
<li>
<i class="fa-solid fa-bullhorn"></i>
<span>News</span>
</li>
<li>
<i class="fa-regular fa-circle-question"></i>
<span>Help</span>
</li>
<li>
<i class="fa-solid fa-dollar-sign"></i>
<span>Partnership</span>
</li>
<li>
<i class="fa-regular fa-file"></i>
<span>Offer</span>
</li>
<li>
<i class="fa-solid fa-headset"></i>
<span>Helpdesk</span>
</li>
</ul>
</div>
英文:
I am currently trying to create a sidebar everything went according to plan but the fontawesome icons are not aligned on same point and it feels weird to see it , tried varoius method but it worsen it so here to get some help.
Plz open the code snippet at full page to see the issue of the disorder of fontawesome icon on each column.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.side_bar {
font-family: 'Montserrat', sans-serif;
position: fixed;
height: 100%;
background-color: #fff;
overflow: hidden;
transition: width 0.2s linear;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.5);
width: 310px;
}
.side_bar ul {
list-style: none;
display: table;
}
.side_bar li {
padding: 1rem;
width: 300px;
display: table;
}
.side_bar i {
padding-right: 1rem;
}
.side_bar li span {
margin-left: 0.7rem;
}
li:has(div.down) {
position: relative;
overflow: hidden;
height: 0px;
transition: height 1s linear;
}
.down {
font-size: 0.7rem;
font-weight: bold;
margin-left: 4rem;
margin-top: 1rem;
border-left: 3px solid rgb(195, 190, 190);
padding-left: 2rem;
padding-bottom: 2rem;
position: absolute;
}
.down>p {
margin-top: 1rem;
color: grey;
}
li:has(div.down):hover {
height: var(--prog);
}
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
<div class="side_bar">
<ul>
<li style="--prog: 180px;">
<i class="fa-solid fa-chart-line"></i>
<span>Promotion</span>
<div class="down">
<p>Add funds</p>
<p>Your sites</p>
<p>Statistics</p>
<p>Paid e-mail</p>
</div>
</li>
<li style="--prog: 340px;">
<i class="fa-solid fa-sack-dollar"></i>
<span>Earning</span>
<div class="down">
<p>Surfing</p>
<p>Social tasks</p>
<p>VIP tasks</p>
<p>Mailbox</p>
<p>Referals</p>
<p>Withdraw funds</p>
<p>Blocked sites</p>
<p>Statistics</p>
<p>Execution history</p>
</div>
</li>
<li>
<i class="fa-regular fa-user"></i>
<span>Account</span>
</li>
<li>
<i class="fa-solid fa-bullhorn"></i>
<span>News</span>
</li>
<li>
<i class="fa-regular fa-circle-question"></i>
<span>Help</span>
</li>
<li>
<i class="fa-solid fa-dollar-sign"></i>
<span>Partnership</span>
</li>
<li>
<i class="fa-regular fa-file"></i>
<span>Offer</span>
</li>
<li>
<i class="fa-solid fa-headset"></i>
<span>Helpdesk</span>
</li>
</ul>
</div>
<!-- end snippet -->
答案1
得分: 1
以下是翻译好的部分：
您可以将i元素的布局更改为table-cell，并设置固定宽度，并将其对齐方式设置为center：
.side_bar {
font-family: 'Montserrat', sans-serif;
position: fixed;
height: 100%;
background-color: #fff;
overflow: hidden;
transition: width 0.2s linear;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.5);
width: 310px;
}
.side_bar ul {
list-style: none;
display: table;
}
.side_bar li {
padding: 1rem;
width: 300px;
display: table;
}
.side_bar i {
display: table-cell;
width: 30px;
text-align: center;
}
.side_bar li span {
margin-left: 0.7rem;
}
li:has(div.down) {
position: relative;
overflow: hidden;
height: 0px;
transition: height 1s linear;
}
.down {
font-size: 0.7rem;
font-weight: bold;
margin-left: 4rem;
margin-top: 1rem;
border-left: 3px solid rgb(195, 190, 190);
padding-left: 2rem;
padding-bottom: 2rem;
position: absolute;
}
.down>p {
margin-top: 1rem;
color: grey;
}
li:has(div.down):hover {
height: var(--prog);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
<div class="side_bar">
<ul>
<li style="--prog: 180px">
<i class="fa-solid fa-chart-line"></i>
<span>Promotion</span>
<div class="down">
<p>Add funds</p>
<p>Your sites</p>
<p>Statistics</p>
<p>Paid e-mail</p>
</div>
</li>
<li style="--prog: 340px">
<i class="fa-solid fa-sack-dollar"></i>
<span>Earning</span>
<div class="down">
<p>Surfing</p>
<p>Social tasks</p>
<p>VIP tasks</p>
<p>Mailbox</p>
<p>Referals</p>
<p>Withdraw funds</p>
<p>Blocked sites</p>
<p>Statistics</p>
<p>Execution history</p>
</div>
</li>
<li>
<i class="fa-regular fa-user"></i>
<span>Account</span>
</li>
<li>
<i class="fa-solid fa-bullhorn"></i>
<span>News</span>
</li>
<li>
<i class="fa-regular fa-circle-question"></i>
<span>Help</span>
</li>
<li>
<i class="fa-solid fa-dollar-sign"></i>
<span>Partnership</span>
</li>
<li>
<i class="fa-regular fa-file"></i>
<span>Offer</span>
</li>
<li>
<i class="fa-solid fa-headset"></i>
<span>Helpdesk</span>
</li>
</ul>
</div>
英文:
You can change the i element's layout to table-cell and give it a fixed width with alignment set to center:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.side_bar {
font-family: 'Montserrat', sans-serif;
position: fixed;
height: 100%;
background-color: #fff;
overflow: hidden;
transition: width 0.2s linear;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.5);
width: 310px;
}
.side_bar ul {
list-style: none;
display: table;
}
.side_bar li {
padding: 1rem;
width: 300px;
display: table;
}
.side_bar i {
display: table-cell;
width: 30px;
text-align: center;
}
.side_bar li span {
margin-left: 0.7rem;
}
li:has(div.down) {
position: relative;
overflow: hidden;
height: 0px;
transition: height 1s linear;
}
.down {
font-size: 0.7rem;
font-weight: bold;
margin-left: 4rem;
margin-top: 1rem;
border-left: 3px solid rgb(195, 190, 190);
padding-left: 2rem;
padding-bottom: 2rem;
position: absolute;
}
.down>p {
margin-top: 1rem;
color: grey;
}
li:has(div.down):hover {
height: var(--prog);
}
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
<div class="side_bar">
<ul>
<li style="--prog: 180px">
<i class="fa-solid fa-chart-line"></i>
<span>Promotion</span>
<div class="down">
<p>Add funds</p>
<p>Your sites</p>
<p>Statistics</p>
<p>Paid e-mail</p>
</div>
</li>
<li style="--prog: 340px">
<i class="fa-solid fa-sack-dollar"></i>
<span>Earning</span>
<div class="down">
<p>Surfing</p>
<p>Social tasks</p>
<p>VIP tasks</p>
<p>Mailbox</p>
<p>Referals</p>
<p>Withdraw funds</p>
<p>Blocked sites</p>
<p>Statistics</p>
<p>Execution history</p>
</div>
</li>
<li>
<i class="fa-regular fa-user"></i>
<span>Account</span>
</li>
<li>
<i class="fa-solid fa-bullhorn"></i>
<span>News</span>
</li>
<li>
<i class="fa-regular fa-circle-question"></i>
<span>Help</span>
</li>
<li>
<i class="fa-solid fa-dollar-sign"></i>
<span>Partnership</span>
</li>
<li>
<i class="fa-regular fa-file"></i>
<span>Offer</span>
</li>
<li>
<i class="fa-solid fa-headset"></i>
<span>Helpdesk</span>
</li>
</ul>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论