CSS: width for <li>

[Timo Nentwig]

Hi!

li
{
display: inline;
}

<li>foo bar</li>
<li>blah</li>

This make both list item to appear next to another rather then from top
to bottom. However, I want both to have the same width. Setting width in
the above CSS doesn't so the job.

What am I going to do here?

Timo

[Jim Dabell]

Timo Nentwig wrote:

Hi!

li
{
display: inline;
}

<li>foo bar</li>
<li>blah</li>

This make both list item to appear next to another rather then from top
to bottom. However, I want both to have the same width. Setting width in
the above CSS doesn't so the job.
That's because the width property doesn't apply to non-replaced inline
elements.

<URL:http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width>

What am I going to do here?

Either:

li {
display: table-cell;
width: 10em;
}

....or:

li {
display: block;
width: 10em;
float: left;
}

The former doesn't work in Internet Explorer, the latter may require a
cleared element following it in the flow.

By the way, this is a stylesheet question, which is better off in the
<URL:news:comp.infosystems.www.authoring.styleshee ts> newsgroup.
Crossposted, followups set.
--
Jim Dabell

[Jim Roberts]

"Timo Nentwig" <tc*@spamgourmet.org> wrote in message
news:c4*************@ID-18956.news.uni-berlin.de...

Hi!

li
{
display: inline;
}

<li>foo bar</li>
<li>blah</li>

This make both list item to appear next to another rather then from top
to bottom. However, I want both to have the same width. Setting width in
the above CSS doesn't so the job.

What am I going to do here?

Timo

Width has no affect on inline elements. You could remove the display: inline
and add this to your stylesheet:

li {
float: left;
width: x /* whatever width you need */
}

Regards,
Jim Roberts

[Bertilo Wennergren]

Jim Roberts:

Width has no affect on inline elements. You could remove the display: inline
and add this to your stylesheet: li {
float: left;
width: x /* whatever width you need */

Finding "whatever width you need" is however not a trivial matter, since
the element contains text, and you can never know how much space text
will actually take (no matter how much you try to control its size).

So you'd better specify the width in "em" units using a bit more than
you seem to need.

--
Bertilo Wennergren <be******@gmx.net> <http://www.bertilow.com>