gpt4 book ai didi

html - 如何将图标左对齐,文本右对齐?

转载 作者:行者123 更新时间:2023-12-02 04:07:59 26 4
gpt4 key购买 nike

我正在尝试将左侧的图标与右侧的文本正确对齐。

.firm-info {
width: 280px;
}
.firm-info ul {
margin-left: -15px;
}
.firm-info ul li {
text-decoration: none;
list-style-type: none;
margin-bottom: 35px;
font-size: 20px;
display: flex;
}
.firm-info ul li i {
float: left;
font-size: 20px;
width: 10px;
}
.firm-info p {
float: left;
max-width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<div class="firm-info">
<ul>
<li>
<i class="fa fa-info-circle"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis cursus nulla, tempus porttitor ex fringilla id. Donec cras amet.
</p>
</li>
<li>
<i class="fa fa-clock-o"></i>
</li>
<li>
<i class="fa fa-building"></i>
</li>
</ul>
</div>

目前看起来像这样:

enter image description here

最终版本应如下所示:

enter image description here

最佳答案

您应该重置 p 标签上的默认上边距,并增加 i 标签的宽度,或者简单地删除宽度并使用一些右内边距或边距用于间距。

<强> jsFiddle

.firm-info {
width: 280px;
}
.firm-info ul {
margin-left: -15px;
}
.firm-info ul li {
list-style-type: none;
margin-bottom: 35px;
font-size: 20px;
display: flex;
}
.firm-info ul li i {
margin-right: 10px;
}
.firm-info ul li p {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<div class="firm-info">
<ul>
<li>
<i class="fa fa-info-circle"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis cursus nulla, tempus porttitor.</p>
</li>
<li>
<i class="fa fa-clock-o"></i>
<p>Bla</p>
</li>
<li>
<i class="fa fa-building"></i>
<p>Bla</p>
</li>
</ul>
</div>

关于html - 如何将图标左对齐,文本右对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38448454/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com