Question

我正在使用Ionicon图标和Bootstrap创建自定义项目符号列表（请参见图片）。因为我用作项目符号的图标是自定义的，所以文本会围绕它环绕。相反，我希望文本稍微缩进，以使其不会像普通项目符号那样包裹。

非常感谢

托马斯

<div class="services-threefold-solutions ">
        <div class="container-fluid showcase-panel-dark">
              <div class="row">
                  <div class="col-md-6">
                      <h2>Threefold solutions.</h2>
                        <p >As a <strong>developer</strong>, <strong>SEO technician</strong> and <strong>data engineer</strong>, I wear a lot of hats! You can combine services across my <a href="{{ site.baseurl }}/expertise">areas of expertise</a> into a single package that would otherwise require expensive agency retainers or several freelancers. </p>
                        <p>Most SEOs are not developers and data specialists. Most developers are not well versed in SEO. In contrast, <strong>I am able to diagnose technical problems and implement their solution.</strong></p>
                        <p>Even if your solution sits squarely within a single service line, my integrated skillset means:</p>
                          <ul class="showcase-bullets pl-0">
                            <li > <ion-icon name="checkmark-circle-outline"></ion-icon> development work will always embody SEO best practices</li>
                            <li> <ion-icon name="checkmark-circle-outline"></ion-icon> SEO consultancy includes careful consideration of the most effective development methods </li>
                            <li> <ion-icon name="checkmark-circle-outline"></ion-icon> every service has tracking and analytics at the forefront, promoting accountability and empowering you to chart subsequent performance and growth </li>
                          </ul>
                    </div>
                  <div class="col-md-6">
                    <!--Image goes here-->
                  </div>
              </div>
        </div>
    </div>

2

Answer 1

您可以在UL上创建一个左边距，并使其为add.ctp。然后，将图标绝对定位在左边缘...

position:relative

Demo

您可以根据自己的喜好调整左侧边距和宽度，无需重新构建HTML。

Answer 2

我更喜欢做的是将图标后的文字换行并使用此小技巧

<ul>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa <br/> aksjdfkasjdfa</span>
  </li>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa</span>
  </li>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa</span>
  </li>
</ul>


i {
  float: left;
}

span {
  display: block;
  padding-left: 120px; // width of the icon
}

https://jsfiddle.net/aq9Laaew/290997/

如何缩进文字以避免包裹图标？

2 个答案: