1 reply [Last post]
tcloud
tcloud's picture
Offline
Regular
Last seen: 13 weeks 4 days ago
Timezone: GMT-5
Joined: 2011-11-16
Posts: 12
Points: 19

Is there a way to make sections of text in a list element have a fixed width so that they line up with the same sections in other list elements?

Here is an example of what I'm trying to do:
http://mykindred.com/test/dir.htm

On that page, each list item contains two items:
1 - a directory name
2 - information about that directory

This is a modification of jQuery TreeView Menu (v1.4).

I was able to achieve my desired result in a simple list, but it doesn't work for this application and I don't know why.

Here is the simple code that works -- but not in this application:

<html>
<head>
<style type="text/css">
span.f1 { display: block; float: left; clear: left; width: 100px; }
li { list-style-type: none; }
</style>
</head>
<body>
<ul>
<li><span class="f1">home</span>root directory</li>
<li><span class="f1">documents</span> site documentation</li>
<li><span class="f1">images</span> images</li>
</ul>
</body>
</html>

I will be happy to post as much of the code that anyone wants to see, but I thought it might be too much to put in this post. The example URL I've given is HTML and the associated stylesheets and javascript files are easy to see.

I appreciate any comments on this.

thanks,
Tom

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 hour 43 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5151
Points: 2749

Hi Tom, You should be able to

Hi Tom,
You should be able to do what you want you just need to target the correct element.