html - 使文本 "bbb"位于图标旁边，而不是拼合在一起

Question

目标:
使字母“bbb”可见，文本应位于图标旁边

问题:
我试图将文本移到右侧，但它不起作用。你们知道怎么做吗？

JSfiddle

谢谢!

#result-filters {
    margin: 20px, 20px, 30px;
}
#result-filters UL {
    display: inline;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: arial, helvetica, sans-serif;
}

#result-filters UL LI {
    margin: 0 8px 0 0;
    float: left;
}


LI.filtered A {
    position: relative;
    padding: 1px 20px 1px 4px;
    background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
    background-position: right bottom;
    font-weight: 400;
    color: #08C;
    text-decoration: none;
}

LI.filtered, #result-filters LI.filtered {
    padding-left: 0;
    background: transparent none repeat scroll 0 0;
}

li.ttt a
{
    position: relative;
    padding: 1px 40px 1px 4px;
    background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
    background-position: left;
    font-weight: 400;
    color: #08C;
    text-decoration: none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #F4F4F4;       
    font-size: 18px;
}

<div id="result-filters">
    <ul>
        <li class="filtered"><a href="">
		aaa
		</a>

        </li>
        <li class="ttt"><a href="">     bbb</a>
        </li>
    </ul>
</div>

Answer 1

你可以只增加左边距。 fiddle :https://jsfiddle.net/5f7qjLgf/2/

li.ttt a
{
    padding: 1px 40px 1px 20px;
    .....
}