CODEWITHSUNDEEP
htmlcss
Pavel Shilyaev
Pavel Shilyaev

Reputation: 19

Html unordered list, problems with bullet points

I wrote the following html for a unordered list, but bullet points are displayed far from the list items.

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>

Upvotes: 0

Views: 969

Answers (6)

Ehsan
Ehsan

Reputation: 12951

Try This :

.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;
  
}
<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>

Upvotes: 0

Deathstorm
Deathstorm

Reputation: 847

Try adding margins or paddings on your complete list. if this doesn't work you can try to give your image a max-width. wich if it is under 100% will shorteb the width at the right side. Don't think this will solve it tho.

Upvotes: 0

Hidayt Rahman
Hidayt Rahman

Reputation: 2680

You want something like that below:

Then just add padding:0 of <ul>

enter image description here

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

Upvotes: 1

Johannes
Johannes

Reputation: 67738

I took your code and only replaced the background image with another image, and it works.

So either you have a padding-left in a CSS rule which you didn't post here, or your image contains a big (transparent and therefore invisible) space on its right side.

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

Upvotes: 0

Super User
Super User

Reputation: 9642

By default ul tag take 60px padding from left

.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;
}
<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>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Add margin & Padding 0 on ul

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

Upvotes: 0

Related Questions