调整一下符号图像- 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

这里我有一个没有列表符号的工作版本。

<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="font-size: 18px;color: #555555;">
        <li style="background: url(http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/01/bullet.png) no-repeat left top;
        list-style: none;
        padding:0 0 16px 30px;">How to attract a CONSTANT flow of the PERFECT clients into your business every day...</li>
        <li style="background: url(http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/01/bullet.png) no-repeat left top;
        list-style: none;
        padding:0 0 16px 30px;">Why LOW PRICES are hurting your business (and your client results)... and how to start commanding $3,000+ prices...</li>
        <li style="background: url(http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/01/bullet.png) no-repeat left top;
        list-style: none;
        padding:0 0 16px 30px;">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="background: url(http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/01/bullet.png) no-repeat left top;
        list-style: none;
        padding:0 0 16px 30px;">How to get STUNNING results for each and every client, and turn your business into a referral-generating machine...</li>
        <li style="background: url(http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/01/bullet.png) no-repeat left top;
        list-style: none;
        padding:0 0 16px 30px;">Why 1-on-1 coaching is OBSOLETE...and how to get better results for clients in less than half the time...</li>
        <li style="background: url(http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/01/bullet.png) no-repeat left top;
        list-style: none;
        padding:0 0 16px 30px;">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="background: url(http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/01/bullet.png) no-repeat left top;
        list-style: none;
        padding:0 0 16px 30px;">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>

Answer 2

您可以通过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>

​

Answer 3

修改您的css，特别是您的li样式：

    li {
       margin: 0 auto;
       display: block;
       position: relative;
       list-style:none;
    }

    li:before {
       width: 21px;
       height: 21px;
       background-image: url(http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/01/bullet.png);
       background-repeat:no-repeat;
       content: "";
       position: absolute;
       left: -25px;
       top: 4px;
    }

您可以调整符号和文本之间的空格，以增加/减少left值。显然，它是针对所有li的一般css样式，因此必须为这些元素指定类名。