By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,824 Members | 1,213 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,824 IT Pros & Developers. It's quick & easy.

CSS: width for <li>

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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

Jul 20 '05 #2

P: n/a

"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
Jul 20 '05 #3

P: n/a
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>
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.