horizontal list of elements with specified widths

[irq3]

I want to make a horizontal list elements, whose widths are determined
by their "width" property. "width" doesn't work on inline elements, so
I can't use <spanas I normally would if the width was determined by
content.

I played around with float: left, display: block, position: absolute,
trying to get them to work properly and I've had some level of success,
but I'm looking for some advice from the gurus on how to do this
properly.

I really wish that I could just apply a width to an inline <span>. What
technique comes the closest to this behavior and is there a page
demonstrating the various techniques?

thanks
-irq3

[Chris F.A. Johnson]

On 2006-08-31, irq3 wrote:

I want to make a horizontal list elements, whose widths are determined
by their "width" property. "width" doesn't work on inline elements, so
I can't use <spanas I normally would if the width was determined by
content.

Use a block element such as <p>, or <li>.

I played around with float: left, display: block, position: absolute,
trying to get them to work properly and I've had some level of success,
but I'm looking for some advice from the gurus on how to do this
properly.

I really wish that I could just apply a width to an inline <span>. What
technique comes the closest to this behavior and is there a page
demonstrating the various techniques?

Do you want something like this:

<style>
ul {
list-style-type: none;
}

ul li,p {
float: left;
width: 5em;
border: 1px solid #cccccc; /* to show width */
text-align: center;
}

h3 { clear: both; }
</style>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>

<h3>Or this:</h3>

<p>one
<p>two
<p>three
<p>four
<p>five
You can see the above example at:
<http://cfaj.freeshell. org/testing/list.html>

Or a real-world page: <http://cfaj.freeshell. org/xword/S017.html>

--
Chris F.A. Johnson <http://cfaj.freeshell. org>
=============== =============== =============== =============== =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)