Strange horizontal nav behaviour

This is a question about how wayfinder displays navigation in a horizontal menu.

In my template I first created the nav manually like this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

The CSS included:

#navigation ul li {
display: inline;
list-style-type: none;
}

This correctly generate a horizontal menu like this:

Item 1 Item 2 Item 3

I.e. with spaces between each item.

However when I do the same with wayfinder, i.e.

<ul>
<li>[[!Wayfinder? &startId=`0` &level=`1` !]]</li>
</ul>

I get:

Item1Item2Item3

I.e. no spaces between the menu items. Any ideas why and what I can do about it? I read the wiki and can’t see a solution for this.

I am using MODx Revolution 2.0.4-pl2

Thanks.
Tony

Wayfinder generates its own ul so your call should just be


[[!Wayfinder? &startId=`0` &level=`1` !]]

Thanks! I deleted the <ul> and <li> mark-up. Then, in the css I added padding-right:10px; and this puts that amount of space between the menu items.