473,380 Members | 1,387 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,380 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 3015
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

29
by: Joseph Haig | last post by:
I am trying to use descriptive lists, <DL>, as shown in <http://www.maths.man.ac.uk/~jhaig/tmp/test.html> with a style sheet at <http://www.maths.man.ac.uk/~jhaig/tmp/default-2.css>. With Mozilla...
7
by: addled | last post by:
Hi there, after reading posts here for a few months, I've built the courage to see if someone can see where I"m going wrong in the webpage I've been working on. In particular the horizontal nav...
7
by: codeslayer | last post by:
Greetings to everyone in ‘forum-land': I have a problem that has plaguing me to no end. It is a CSS-related question, and I have not seen this question posted anywhere in forums or through...
0
by: Griff | last post by:
Hi I have the following html structure <div> <ul> <li> <a href="...">I'm a level 1 link</a> <ul> <li>
2
by: darkpowrjd | last post by:
I've been trying to create a new navigation system for my site, and I got everything figured out except for one thing. Here is the CSS code I'm using right now: body { font: normal 10px Verdana,...
1
by: Eric Jones | last post by:
Hello newsgroup members, I really like CSS, and have created some button like navigation UL/li, etc. I have hover, change color, etc. I am using the "link" as a button, and using ajax and...
1
by: laredotornado | last post by:
Hi, Is there a cross-browser way to keep the items of an unordered list on the same line (horizontal plane)? This is the code I'm working with <ul class="tabs-nav"> <li class=""...
11
victorduwon
by: victorduwon | last post by:
Hey guys, I have built a suckerfish navigation menu using CSS and HTML with unordered lists. I was testing this menu in Safari, and it came out good. When I finished I tested it in firefox and...
15
by: rhino | last post by:
I've put together a prototype of two-tiered CSS tabs that works really well in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_ that the placement of the lower tier of tabs is...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.