469,291 Members | 1,777 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,291 developers. It's quick & easy.

horizontal list of elements with specified widths

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

Aug 31 '06 #1
1 1423
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)
Aug 31 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by ste.paoletti | last post: by
2 posts views Thread by laredotornado | last post: by
4 posts views Thread by =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?= | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.