使文字“bbb”在图标旁边，不要拼合在一起 [英] Make the text "bbb" to be beside to the icon, not flatten together

问题描述

目标：

将字母bbb设置为可见，并且文本应该放在图标旁边

问题：

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

JSfiddle

谢谢！

＃result-filters {margin：20px， 20px，30px;}＃result-filters UL {display：inline; list-style：outside none none;保证金：0;填充：0; font-size：12px; font-family：arial，helvetica，sans-serif;}＃结果过滤器UL LI {margin：0 8px 0 0; float：left;} LI.filtered A {position：relative; padding：1px 20px 1px 4px;背景：＃F0F0FF url（https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png）不重复向右滚动0;背景位置：右下角; font-weight：400;颜色：＃08C; text-decoration：none;} LI.filtered，＃结果过滤器LI.filtered {padding-left：0;背景：透明无重复滚动0 0;} li.ttt a {position：relative; padding：1px 40px 1px 4px;背景：＃F0F0FF url（https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png）无重复滚动左0; background-position：left; font-weight：400;颜色：＃08C;文字修饰：无; -webkit-border-radius：8px; -moz-border-radius：8px; border-radius：8px; background-color：＃F4F4F4; font-size：18px;}

< div id = 结果过滤器> < UL> < li class =filtered>< a href => AAA-LT; / A> < /锂> < li class =ttt>< a href => BBB< / A> < /锂> < / div>< / div>

解决方案

你可以增加左边的填充。小提琴： https://jsfiddle.net/5f7qjLgf/2/

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

Goal:
Make the letter "bbb" to be visible and the text should be beside to the icon

Problem:
I tried to move the text to the right side but it doesn't work. Do you guys know how to do it?

JSfiddle

Thanks!

#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>

解决方案

You can just increase the left padding. Fiddle: https://jsfiddle.net/5f7qjLgf/2/

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

这篇关于使文字“bbb”在图标旁边，不要拼合在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！