By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,694 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,694 IT Pros & Developers. It's quick & easy.

horizontal list of elements with specified widths

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.