无法获得显示列表项右侧的自定义项目符号图像

Question

我正在尝试创建一个列表，我的子弹是检查标记正好在每个列表项的右侧。

列表需要放在页面的中心

(我会张贴一个图形示例，但没有代表点)。

这就是我想要的页面中心。

LIST ITEM 1 ✔

现在，我的列表在页面的中央，但是复选标记一直在页面的右边。

这是我现在拥有的(和不想要的)。

列表项1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,& # x2714;
列表项2,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,& # x2714;
列表项3,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,& # x2714;

      <div class="welcome-text">
          <div class="welcome-text1">
                <ul class="certs">
                    <li>Licensed</li>
                    <li>bonded</li>
                    <li>insured</li>
                </ul>
          </div>
          <div class="welcome-text2">
                The BEST Choice For Quality Termite Pest &amp; Lawn Care! Protecting your home starts with a free inspection.
          </div>
  </div>

下面是上面的CSS:

.welcome-text{
    padding-top:30px;
    margin:0 auto;
    width:80%;
    overflow:hidden;
}
.welcome-text1{
    color:#333333;
    font-family:Open Sans Condensed;
    text-transform:uppercase;
    font-size:24px;
    line-height:30px;
}
.welcome-text1 ul{
    list-style-type: none;
    margin-left: 0;
}
.welcome-text ul li{
    display:block;
    background-color:#CCC;
    background: url(images/checkmark.png) right center no-repeat;
}
.welcome-text2{
    color:#777;
    font-family:tahoma;
    font-size:18px;
    line-height:20px;
}

.certs li{
    list-style: none;
    padding:3px;
    margin:0;
}

任何想法?

TIA

Answer 1

如果你只需要你的项目符号出现在右边，你可以简单地使用

<ul dir="rtl" type="disc">

然后使用list-style-type和all改变子弹头的图像…我想这会解决你的问题。

Answer 2

尝试在ui上设置一个宽度。

.welcome-text1 ul{
  width:50%;
}

http://jsfiddle.net/aL3Ap/

Answer 3

你可以使用伪元素来显示你的分数http://codepen.io/gcyrillus/pen/IJtzi

实际上，只是在你的图像上填充(如果它在HTML中)，这是它

Answer 4

只要给你的ul标签一个宽度，它就会完成