how to make <ul> *not* move text to the right

[Tomasz Chmielewski]

I want to make a small menu with <ul> and <li>.

The problem is, when I use <ul>, the menu is moved to the right a bit.

Let me illustrate by example:


Here some text before
<ul>
<li>item 1 about...</li>
<li>item 2 else...</li>
<ul>
Here some text after


Renders as:


Here some text before

*item 1 about...
*item 2 else...

Here some text after


Whereas I would like it to render just as the rest of the text (Here
some text):

Here some text before

* item 1 about...
* item 2 else...

Here some text after


If I remove <ul>, it will work fine, but then, it doesn't wrap properly
if the line is longer:


Here some text before
<li>item 1 about very long line</li>
<li>item 2 else...</li>
Here some text after


Renders as:

Here some text before

* item 1 about very long
line
* item 2 else...

Here some text after



Whereas with <ul>, it renders just fine (but is moved to the right):

Here some text before
<ul>
<li>item 1 about very long line</li>
<li>item 2 else...</li>
<ul>
Here some text after


Renders as:

Here some text before

* item 1 about very long
line
* item 2 else...

Here some text after


Anyone knows the right spell?

 

[Jukka K. Korpela]

Scripsit Tomasz Chmielewski:

I want to make a small menu with <ul> and <li>.

What do you mean by a menu? Your examples show no sign of links. Did you
omit them just for simplicity?

The problem is, when I use <ul>, the menu is moved to the right a bit.

That's to be expected, since the default rendering has left margin or
padding, partly to accommodate list bullets.

Let me illustrate by example:

Why don't you post a URL so that we could see a _real_ example? The one you
posted has a syntax error.

If I remove <ul>, it will work fine, but then, it doesn't wrap
properly if the line is longer:

Then it's not a list, and it's not valid markup. All bets are off.

Anyone knows the right spell?

Surely. Set the left margin and padding of ul and li elements so that you
have the desired total amount of indentation. It's easiest to set all but
one of them to zero. Beware that the indentation should be at least about
1.3em, since otherwise the bullets might not fit in. (If you want to get rid
of the bullets, use list-style-type: none.)

You would thus use something like the following:

<style type="text/css">
ul, ul li { margin-left: 0; padding-left: 0; }
ul { margin-left: 1.3em; }
</style>