Stylesheets - horizontal list of elements with specified widths

Author

horizontal list of elements with specified widths

irq3

2006-08-30, 10:40 pm

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 <span> as 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

2006-08-30, 10:40 pm

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 <span> as 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)