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>

Answer 2

添加margin＆amp; Padding

上的0 ul

.right-block ul
  {
    padding:0;
    margin:0;
  }

Answer 3

默认情况下ul标记从左侧获取60px填充

＆＃13;

＆＃13;

.right-block ul {
	padding-left: 0px;
}
.right-block ul li {
	list-style: none;
	background: url(https://placeholdit.imgix.net/~text?txtsize=5&txt=10%C3%9710&w=10&h=10&txtpad=1) 0 5px no-repeat;
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 10px;
	padding: 0 0 0 16px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

我拿了你的代码而只用用另一张图片替换了背景图片，它确实有效。

因此，要么你在CSS规则中有一个padding-left，你没有在这里发布，或者你的图像在其右侧包含一个大的（透明的，因此不可见的）空间。

.right-block ul li {
  list-style: none;
  background: url(http://placehold.it/14x14/00f) 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 5

尝试在完整列表中添加边距或填充。如果这不起作用，您可以尝试为图像提供最大宽度。如果它低于100％将缩短右侧的宽度。不要以为这会解决它。

Answer 6

试试这个：

＆＃13;

＆＃13;

.right-block ul {

   padding: 0;
   
}
.right-block ul li {

   list-style: none;
   font-size: 14px;
   line-height: 20px;
   margin-bottom: 20px;    
}

.right-block ul li:before {

  content: " ";
  background-image:url(http://pages.cs.wisc.edu/~powerjg/files/bullet_triangle_grey.png);
  background-size: 30px 20px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px; 
  height: 20px;
  vertical-align: middle;
  margin-right: 10px;
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;