[css] Anyways to get unordered list items to take up just as muchspace as they need?

[Keith Hughitt]

For example,

If you have a list:

<ul>
<li>item 1 is short.</li>
<li>item 2 is a little bit longer</li>
</ul>

regardless of the size of the contents of each list item, the element
will span the entire width of the UL
container.

Anyone know how I can get the list items to only take up as much space
as their content requires?

Thanks,
Keith

[Roy A.]

On 21 Aug, 21:18, Keith Hughitt <[e-mail]:

For example,

If you have a list:

<ul>
* * * * <li>item 1 is short.</li>
* * * * <li>item 2 is a little bit longer</li>
</ul>

regardless of the size of the contents of each list item, the element
will span the entire width of the UL
container.

Anyone know how I can get the list items to only take up as much space
as their content requires?

Table cells, floating elements, absolute positioned elements and
inline-block elements use a 'shrink-to-fit' algorithm.

Inline-block is css 2.1 (work in progress). IE 6 and IE 7 don't
support CSS tables or 'table-cell'. So, depending on your layout you
can use tables, floating elements or absolute positioned elements.

With floating elements you can try this:

li { padding: 0 .5em }
ul { float: left; padding-left: 0; margin-left: 1.33em; list-style-
position: inside }

or

li { padding: 0 .5em }
ul { float: left; padding-left: 1.33em; margin-left: 0; list-style-
position: outside }

[David E. Ross]

On 8/21/2008 12:18 PM, Keith Hughitt wrote:

For example,

If you have a list:

<ul>
<li>item 1 is short.</li>
<li>item 2 is a little bit longer</li>
</ul>

regardless of the size of the contents of each list item, the element
will span the entire width of the UL
container.

Anyone know how I can get the list items to only take up as much space
as their content requires?

Thanks,
Keith

What would you put into the unused space?

Each list item starts a new line. The line is only as long as its
content. I have an example of a page (at
<http://www.rossde.com/retired.html>) where there are block elements to
the right of list items (or parts thereof) within a UL element, and the
list items do not encroach into the blocks. The same page has a block
element to the left of a part of a list item, and the list item wraps
around to the right of the block. Therefore, I don't see a fixed width
for the UL element.

--

David E. Ross
<http://www.rossde.com/>

Q: What's a President Bush cocktail?
A: Business on the rocks.

[Keith Hughitt]

Thanks for the responses. I'm not sure if I made it clear what my goal
was. The problem I'm using li elements
as buttons to trigger some event. The problem, however, is that when I
do this, clicking anywhere on the line
containing the list item will trigger the event. I want it to only be
triggered when the text is clicked. One solution
would be to wrap the text in anchor tags, but I would rather use the
list items directly if possible.

Keith

On Aug 21, 7:20 pm, "David E. Ross" <[e-mail]:

On 8/21/2008 12:18 PM, Keith Hughitt wrote:

For example,

If you have a list:

<ul>
<li>item 1 is short.</li>
<li>item 2 is a little bit longer</li>
</ul>

regardless of the size of the contents of each list item, the element
will span the entire width of the UL
container.

Anyone know how I can get the list items to only take up as much space
as their content requires?

Thanks,
Keith

What would you put into the unused space?

Each list item starts a new line. The line is only as long as its
content. I have an example of a page (at
<http://www.rossde.com/retired.html>) where there are block elements to
the right of list items (or parts thereof) within a UL element, and the
list items do not encroach into the blocks. The same page has a block
element to the left of a part of a list item, and the list item wraps
around to the right of the block. Therefore, I don't see a fixed width
for the UL element.

--

David E. Ross
<http://www.rossde.com/>

Q: What's a President Bush cocktail?
A: Business on the rocks.

[David E. Ross]

On 8/22/2008 7:56 AM, Keith Hughitt wrote:

Thanks for the responses. I'm not sure if I made it clear what my goal
was. The problem I'm using li elements
as buttons to trigger some event. The problem, however, is that when I
do this, clicking anywhere on the line
containing the list item will trigger the event. I want it to only be
triggered when the text is clicked. One solution
would be to wrap the text in anchor tags, but I would rather use the
list items directly if possible.

Keith

To limit the scope of the anchor, wrap only the list-item text.

I'm not even sure that it's valid to wrap the entire list-item in an
anchor. You might try creating a Web page that does it both ways and
then testing it at <http://validator.w3.org/>.

--

David E. Ross
<http://www.rossde.com/>

Q: What's a President Bush cocktail?
A: Business on the rocks.