Question

我觉得应该是一个简单的，但它证明是一个棘手的问题。

我只有<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>

Answer 1

使用绝对定位。

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>

Answer 2

您可以尝试使用position：absolute;

将图标（）放在相应列表项之外

我不知道您尝试实现的实际视觉效果，但它应该是这样的：

＆＃13;

li {
  position: relative;
}

i {
  position absolute;
  left: -24px;
  top: 0;
}

＆＃13;

Answer 3

使用bootstraps排版类

将列表标记为无样式

<ul id="skills-list" class="list-unstyled">

运行代码段以查看：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">


<ul id="skills-list" class="list-unstyled">
  <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>

Answer 4

      <ul id="skills-list">
        <i class="fas fa-check-square"></i><li> I aim to implement modern technologies into my projects using a movile first approach.</li>
      </ul>

这就是你想要的吗？

移动字体在李的外面

4 个答案: