Connecting Tech Pros Worldwide Forums | Help | Site Map

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

Keith Hughitt
Guest
 
Posts: n/a
#1: Aug 21 '08
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.
Guest
 
Posts: n/a
#2: Aug 21 '08

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


On 21 Aug, 21:18, Keith Hughitt <keith.hugh...@gmail.comwrote:
Quote:
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
Guest
 
Posts: n/a
#3: Aug 22 '08

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


On 8/21/2008 12:18 PM, Keith Hughitt wrote:
Quote:
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
Guest
 
Posts: n/a
#4: Aug 22 '08

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


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:
Quote:
On 8/21/2008 12:18 PM, Keith Hughitt wrote:
>
>
>
Quote:
For example,
>
Quote:
If you have a list:
>
Quote:
<ul>
<li>item 1 is short.</li>
<li>item 2 is a little bit longer</li>
</ul>
>
Quote:
regardless of the size of the contents of each list item, the element
will span the entire width of the UL
container.
>
Quote:
Anyone know how I can get the list items to only take up as much space
as their content requires?
>
Quote:
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
Guest
 
Posts: n/a
#5: Aug 22 '08

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


On 8/22/2008 7:56 AM, Keith Hughitt wrote:
Quote:
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.
Closed Thread