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)
