html无序列表，要点问题

Question

我为无序列表编写了以下 html，但是元素符号显示在远离列表项的地方。

Preview image

.right-block ul li {
  list-style: none;
  background: url(../img/list_marker.png) 0 5px no-repeat;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
  padding: 0 0 0 16px;
}

 <div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-1 col-sm-12 col-xs-12 ">
  <div class="right-block">
    <div class="right-block-title"><h3>Categories</h3></div>
    <ul>
      <li><a href="#">Wordpress</a></li>
      <li><a href="#">Wordpress</a></li>
      <li><a href="#">Wordpress</a></li>
    </ul>  
  </div>
</div>

Answer 1

你想要下面这样的东西:

然后只需添加 padding:0的 <ul>

.right-block ul li {
  list-style: none;
  background: url(http://www.clipartbest.com/cliparts/7Ta/pbq/7TapbqgGc.png) 0 5px no-repeat;
  background-size: 20px;
  background-position: left center;
  font-size: 20px;
  padding: 8px 29px;
}

.right-block ul {
  padding: 0;
}

<div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-1 col-sm-12 col-xs-12 ">
  <div class="right-block">
    <div class="right-block-title">
      <h3>Categories</h3>
    </div>
    <ul>
      <li><a href="#">Wordpress</a></li>
      <li><a href="#">Wordpress</a></li>
      <li><a href="#">Wordpress</a></li>
    </ul>
  </div>
</div>