471,602 Members | 1,304 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,602 software developers and data experts.

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

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
Aug 21 '08 #1
4 2899
On 21 Aug, 21:18, Keith Hughitt <keith.hugh...@gmail.comwrote:
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 }
Aug 21 '08 #2
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.
Aug 21 '08 #3
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" <nob...@nowhere.notwrote:
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.
Aug 22 '08 #4
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.
Aug 22 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

29 posts views Thread by Joseph Haig | last post: by
7 posts views Thread by addled | last post: by
1 post views Thread by Eric Jones | last post: by
1 post views Thread by laredotornado | last post: by
15 posts views Thread by rhino | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.