html - 稍微调整元素符号图像 - HTML 和 CSS

Question

我这里有一个页面:http://beaminggeek.com/profitbuilder/test-2/

目前子弹不适合它的元素。

我有 ff 代码:

    <div style="width: 75%; margin-left: 103px;">
<h3 style="color: #0f8cef; font-size: 24px; font-weight: bold; margin-bottom: 20px;">Let's Scale Your Business FAST!</h3>
<h3 style="color: #0f8cef; font-size: 24px; font-weight: bold; margin-bottom: 20px;">In This Masterclass, You'll Discover...</h3>
<ul style="list-style-image: url('http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/01/bullet.png'); font-size: 18px; color: #555555; letter-spacing: 0.5px; line-height: 26px; margin: 35px 0px;">
    <li style="margin: 16px;">How to attract a CONSTANT flow of the PERFECT clients into your business every day...</li>
    <li style="margin: 16px;">Why LOW PRICES are hurting your business (and your client results)... and how to start commanding $3,000+ prices...</li>
    <li style="margin: 16px;">A PROVEN 4-step system for putting ALL of your client attraction on 100% autopilot...you won't have to hunt for clients again...</li>
    <li style="margin: 16px;">How to get STUNNING results for each and every client, and turn your business into a referral-generating machine...</li>
    <li style="margin: 16px;">Why 1-on-1 coaching is OBSOLETE...and how to get better results for clients in less than half the time...</li>
    <li style="margin: 16px;">How to take a prospect from "click" to "client" in less than 48 hours. No more sitting by the phone, waiting to hear back!</li>
    <li style="margin: 16px;">AND...how to do ALL of this without blogging, Tweeting, "branding", podcasting, YouTube-ing, or ANY of that other "marketing" stuff that leaves you drained and burnt-out!</li>
</ul>
</div>

我想让它看起来完全像这样:

您可以使用 Chrome 的检查器工具检查子弹并检查如何调整它。

Answer 1

你可以简单地通过 CSS 做到这一点 🙂

ul {
  list-style: none;
}
ul li {
  background: url(https://s27.postimg.org/mebz7s2lf/bllt.png) no-repeat left top;
  padding: 0 0 10px 30px;
  
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</li>
  <li>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</li>
  <li>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in.</li>
</ul>