我有一个我觉得应该很简单的问题,但它被证明是一个棘手的问题。
我只有一个 <ul>
与各种<li>
元素。
分配给每个 LI 的是一个很棒的字体图标。
我的问题是我希望图标位于列表项的外部,此时它在列表项内部并插入第一行文本,我希望两行文本都内嵌在图标旁边。
我尝试使用以下方法:-
#skills-list li{
list-style-position: outside;
}
这似乎只适用于标准标记,例如子弹等。我也尝试过针对其他类,例如:-
#skills-list li.i{...}
#skills-list li.a{...}
有人能帮忙吗,下面是我的代码:-
<ul id="skills-list">
<li><i class="fas fa-check-square"></i> I aim to implement modern technologies into my projects using a movile first approach.</li>
<li><i class="fas fa-check-square"></i> Exposing myself to GIT allows me to track, comment and update my project in a team repository.</li>
<li><i class="fas fa-check-square"></i> Working with BOOTSTRAP frameworks allows implementation of elegant and modern design.</li>
<li><i class="fas fa-check-square"></i> Learning SASS allowed me to speed up my web design process, creating fast and efficient CSS3.</li>
<li><i class="fas fa-check-square"></i> Basic Understanding of JavaScript and JQuery means that I understand the process of DOM Manipulation.</li>
<li><i class="fas fa-check-square"></i> My previous background is in Animation, providing me with a good eye for detail and creativity.</li>
</ul>
最佳答案
使用绝对定位。
ul {
list-style: none;
}
#skills-list li {
position: relative;
}
#skills-list li i {
position: absolute;
left: -2em
}
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet" />
<ul id="skills-list">
<li><i class="fas fa-check-square"></i> I aim to implement modern technologies into my projects using a movile first approach.</li>
<li><i class="fas fa-check-square"></i> Exposing myself to GIT allows me to track, comment and update my project in a team repository.</li>
<li><i class="fas fa-check-square"></i> Working with BOOTSTRAP frameworks allows implementation of elegant and modern design.</li>
<li><i class="fas fa-check-square"></i> Learning SASS allowed me to speed up my web design process, creating fast and efficient CSS3.</li>
<li><i class="fas fa-check-square"></i> Basic Understanding of JavaScript and JQuery means that I understand the process of DOM Manipulation.</li>
<li><i class="fas fa-check-square"></i> My previous background is in Animation, providing me with a good eye for detail and creativity.</li>
</ul>
关于css - 将 FontAwesome 图标移到 li 之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50762521/