How To Adjust the Space Between the Bullet and Text using CSS

Posted By: Tech Guy
Last Updated at 5:13 PM on Wednesday Mar 4, 2009
Found in: CSS

There are times when you may need to adjust the space between the bullet and the text when using HTML lists (such as <UL>, <OL>, etc.)

This should be a simple thing to do, yet it isn't. However the solution is quite simple.

Instead of using the native image replacement in css for a bullet, we take advantage of the background-image property in css to display an image and also adjust the text spacing at the same time. By specifying a background image for the LI and padding-left property, this will move the text over an appropriate amount.

In the example below, we adjust the padding-left to 20 pixels:

<STYLE TYPE="text/css">

UL LI{
list-style-type: none;
padding: 2px 0 0 20px;
background: url(/download.aspx?FileID=6&Inline=true&Thumb=false) no-repeat 0 7px;
}
</STYLE>

<UL>
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
</UL>


Gives you:

  • Item 1
  • Item 2
  • Item 3
  • Item 4




Post a Comment

 


Name:


E-Mail:


Comments:  






Copyright 2017 Alter Procedure All Rights Reserved