[thelist] css: formatting list item spacing

Jared Eikenberg jeikenb at jeikenb.com
Tue Dec 11 13:49:28 CST 2001


Chris is correct in that there is no property/attribute you can set for
ordered lists, unordered lists, or list items to accomplish this. One
way you could do this is to play with the positioning of the text within
each list item by using a span. The following should work for you,
adjusting the `-8px' to reflect the spacing you want:

<ul>
<li /><span style="position:relative;left:-8px;">this</span>
<li /><span style="position:relative;left:-8px;">should</span>
<li /><span style="position:relative;left:-8px;">work</span>
</ul>

I know this is not the prettiest code, but it gets the job done (and
about the only way using the CSS1 def I can come up with.) If you have
multiple list items you want to do this with, create a class to define
the styles and reference it within the spans.

-Jared Eikenberg

> IIRC there isn't, so searching any further will only give you 
> an ulcer (or at least some bad heartburn).  I usually end up 
> using a table (messy, yes, but it does the job well) with two 
> cells: left side for an arrow/bullet image, right side for 
> the text.  Keeps things lookin good.
> >
> > I'm trying to adjust the horizontal (for lack of a better term) 
> > padding between list bullets and the text of each list item.
> >
> > List items by default place a 12-px-or-so horizontal gap 
> between the 
> > bullet and the text. I'd like to decrease that gap for 
> visual reasons, 
> > which is not really essential, I suppose, but would be very sleek. 
> > I've read through the entire CSS1 spec (again), played with 
> margins, 
> > padding, and borders on the <ul> and <li> elements . . . no cigar. 
> > There must be some aspect of the <li> element that I'm not paying 
> > attention to.
> >
> > Suggestions?





More information about the thelist mailing list