将图像用作要点

时间:2018-07-10 07:27:57

标签: html css sass

我在使用图像作为项目符号点时遇到问题-项目符号点的位置像我想要的那样,只有只有一行文本的项目符号点,但是当它们有多行文本时,项目符号点就不会从开始,但在中间。 有什么方法可以使用怪异的图像画布技巧来定位这2个要点?是针对这2个项目符号使用其他图像(例如,带有巨大底部画布的图像)的最佳解决方案?

这就是我在说的:

第二个项目符号点在此处的位置不正确:
Second bullet point is positioned incorrectly here 最后的项目符号位置在这里不正确: enter image description here

HTML:

<ul class="service-box__list">
              <li class="service-box__item">
                Võtame enda kanda kogu igapäevase kinnisvarahalduse, sh ka kõik omaniku kohustused;
              </li>
              <li class="service-box__item">
                Pakume kinnisvara korrashoidu, tarbimis (nt. elekter, küte, vesi, kanalisatsiooni ning kommunikatsioon)
                -ja tugiteenused (nt parkimiskorraldus, valvesüsteemid);
              </li>
              <li class="service-box__item">
                Dokumenteerimine objektiga seotud infovahetuse oma digitaalsesse andmebaasi;
              </li>
              <li class="service-box__item">
                Organiseerimine kõik vajalikud ehitus- ja remonditööd;
              </li>
              <li class="service-box__item">
                Koostame perioodilised eelarved ning aruandluse vastavalt Sinu äri vajadustele ja isikupäradele;
              </li>
              <li class="service-box__item">
                Viime läbi objektiga seonduvate andmete regulaarse analüüsi, et parandada hoone võtmenäitajaid.
              </li>
</ul>

CSS:

&__list {
    list-style: none;
}

&__item {
    font-size: $default-font-size;
    background: url('./../img/roheline-leht-2.png') no-repeat left;
    padding-left: 2.5rem;  
}

1 个答案:

答案 0 :(得分:2)

使用list-style-image

ul {
    list-style-image: url('image.png');
}

在您的示例中:

.service-box__list {
    list-style-image: url('../../img/roheline-leht-2.png');
}