positioning in ordered lists

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I'm working with ordered lists.  The default list is indented about the same
amount as a <blockquote> would do.  Is there any way to over-ride or tweak
this, so the list is not indented at all?  (oops, okay, just changed that
with "text-indent", re-defining the <li> tag.  It "un-indents" the list
items, but only the first text line of each item.  other text lines are
still indented a further "tab" to the right .. :(

On the same subject, ordered lists contain quite a wide text indent between
the <ol> number and the first character of the list item.  Seems like about
a 2-character indent.  Is there any way to change this?

thanks for any help with this...


Re: positioning in ordered lists

Quoted text here. Click to load it

First set

ul {margin: 0;padding: 0;}

li {margin: 0;padding: 0;}

to see the effect. Then you can adjust to your heart's content.

You do know about css? If you don't and want quick, in the html,

<ul style="margin: 0;padding: 0;">

and so on.

Otherwise, put this sort of thing in the head of the document:

<style type="text/css">
ul {margin: 0;padding: 0;}
li {margin: 0;padding: 0;}

Otherwise and best if you have a more styles, put a link in the
head to a separate style sheet.


Re: positioning in ordered lists

Scripsit Stann:

Quoted text here. Click to load it

The default indentation for both is 40 pixels, in common practice, though
lists look different because of the numbers.

Quoted text here. Click to load it

Surely. As "dorayme" tells in his/her reply, you can set the margins and
paddings to zero. However, there's an important side effect: there won't be
any room for the numbers then.

Thus, you could set all the margins and paddings to zero _except_
margin-left for <ol> (or the <li> elements), which should be set to a value
that is sufficient for the number, the period, and the spacing before the
list item content. This is not exact science, but

ol, li { margin:0; padding: 0; }
ol { margin-left: 1.6em; }

would typically result in "unindented" numbered list. But don't blame me if
part of the numbers gets chopped off under some circumstances. The only way
to get exact results (with the usual caveats) is to make the numbers part of
the content:

<li>1. foo bar
<li>2. zap zap

ul, li { margin:0; padding: 0; list-style: none; }

Quoted text here. Click to load it

That might give the illusion of working, until you view the page in a window
that is narrower than needed to keep each list item on one line. Please
don't use CSS properties without reading and understanding their _meaning_

Quoted text here. Click to load it

<lecture type="semantic">No, the <li> tag _means_ "list item". There is no
way you could change this definition. You can use the element against its
definition but not change its definition.</lecture>

Quoted text here. Click to load it

Well, yes. You would have known this in advance if...

Quoted text here. Click to load it

Not really in CSS as currently defined and implemented. The tricky way of
putting numbers into the items would avoid the problem, of course.

Jukka K. Korpela ("Yucca")

Re: positioning in ordered lists

Quoted text here. Click to load it

There is another caveat which is that the 40px margin-left (or
padding-left) for ol and ul in the default stylesheet is not really
margin-left but "margin-nearside" or "margin-start", because it turns
into a right margin if the element's computed value of direction is rtl.

This isn't in the CSS spec but if browsers didn't do it then simple
nested lists would look pretty stupid in the right-to-left direction,
lacking any indentation or space for bullets.

It's a caveat because if you set margin-left yourself it really does
mean margin-_left_, not margin-nearside, in browsers I've tried (and I
agree with this interpretation), and so your lists will look bad if
their direction is rtl.

If OP's not using rtl then it doesn't matter.

Site Timeline