«

I have below a simple nested list situation.
I want the state names to appear on every other line as the top <ul>.
Below each state name is the second list which I want to be inline.
If I simply declare "display:inline" either as a class or an inline
style statement, the second line does not appear inline as intended.

What's the trick?


<div class="state">
<ul>
<li>Alabama</li>
<ul class="line">
<li>Top 50</li><li>Cities</li><li>Zip code</li>
</ul>
<li>Alaska</li>
<li>Arizona</li>
<li>Arkansas</li>
</ul>
</div>

On 2009-02-08, richard wrote:
> I have below a simple nested list situation.
> I want the state names to appear on every other line as the top <ul>.
> Below each state name is the second list which I want to be inline.
> If I simply declare "display:inline" either as a class or an inline
> style statement, the second line does not appear inline as intended.
>
> What's the trick?
>
>
><div class="state">
><ul>
><li>Alabama</li>
> <ul class="line">
> <li>Top 50</li><li>Cities</li><li>Zip code</li>
> </ul>
><li>Alaska</li>
><li>Arizona</li>
><li>Arkansas</li>
></ul>
></div>

<div class="state">
<ul>
<li>Alabama
<ul class="line">
<li>Top 50</li><li>Cities</li><li>Zip code</li>
</ul>
</li>
<li>Alaska</li>
<li>Arizona</li>
<li>Arkansas</li>
</ul>
</div>


--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

richard wrote:

> I have below a simple nested list situation.

Almost.

> I want the state names to appear on every other line as the top <ul>.
> Below each state name is the second list which I want to be inline.
> If I simply declare "display:inline" either as a class or an inline
> style statement, the second line does not appear inline as intended.
>
> What's the trick?

The trick is to properly nest the sub-<ul>:
>
> <div class="state">
> <ul>
> <li>Alabama</li> <------ move this </li>
> <ul class="line">
> <li>Top 50</li><li>Cities</li><li>Zip code</li>
> </ul>
> </li> <------ to here
> <li>Alaska</li>
> <li>Arizona</li>
> <li>Arkansas</li>
> </ul>
> </div>

I don't see the point of:
<li>Top 50</li><li>Cities</li><li>Zip code</li>

Are they going to be links to other pages when you're finished? As
always, a URL would help.

--
-bts
-Friends don't let friends drive Windows

On Sun, 08 Feb 2009 04:55:08 +0000, "Chris F.A. Johnson"
<> wrote:

>On 2009-02-08, richard wrote:
>> I have below a simple nested list situation.
>> I want the state names to appear on every other line as the top <ul>.
>> Below each state name is the second list which I want to be inline.
>> If I simply declare "display:inline" either as a class or an inline
>> style statement, the second line does not appear inline as intended.
>>
>> What's the trick?
>>
>>
>><div class="state">
>><ul>
>><li>Alabama</li>
>> <ul class="line">
>> <li>Top 50</li><li>Cities</li><li>Zip code</li>
>> </ul>
>><li>Alaska</li>
>><li>Arizona</li>
>><li>Arkansas</li>
>></ul>
>></div>
>
><div class="state">
> <ul>
> <li>Alabama
> <ul class="line">
> <li>Top 50</li><li>Cities</li><li>Zip code</li>
> </ul>
> </li>
> <li>Alaska</li>
> <li>Arizona</li>
> <li>Arkansas</li>
> </ul>
></div>


Thanks. I totally forgot about where to split.

On Sun, 8 Feb 2009 00:05:51 -0500, "Beauregard T. Shagnasty"
<> wrote:

>richard wrote:
>
>> I have below a simple nested list situation.
>
>Almost.
>
>> I want the state names to appear on every other line as the top <ul>.
>> Below each state name is the second list which I want to be inline.
>> If I simply declare "display:inline" either as a class or an inline
>> style statement, the second line does not appear inline as intended.
>>
>> What's the trick?
>
>The trick is to properly nest the sub-<ul>:
>>
>> <div class="state">
>> <ul>
>> <li>Alabama</li> <------ move this </li>
>> <ul class="line">
>> <li>Top 50</li><li>Cities</li><li>Zip code</li>
>> </ul>
>> </li> <------ to here
>> <li>Alaska</li>
>> <li>Arizona</li>
>> <li>Arkansas</li>
>> </ul>
>> </div>
>
>I don't see the point of:
> <li>Top 50</li><li>Cities</li><li>Zip code</li>
>
>Are they going to be links to other pages when you're finished? As
>always, a URL would help.

That's the idea. This is just a rough draft.