Breadcrumbs display

I am new to MODX and am evaluting it - Revolution, running on WAMP on my laptop.

I have installed Breadcrumbs, but this is how it displays:
Home
>>
About

Obviously, I want it on a single line, so I have used CSS to make it float left. It now displays like this:
Home About >>

The separator is at the end instead of being between the references.

Has anyone else had this problem? If so, what did you do to fix it?
Is there something I should be doing that I have not seen in the documentation?

Here's the HTML:

<div class="breadcrumb">
[[Breadcrumbs]]
</div>

And here's the CSS:

.breadcrumb
{ text-align: left;
margin-top: 4px;
margin-left: 15px;
font-size: smaller;
font-style: italic;
font-weight: normal;
}
.breadcrumb li
{ list-style: none;
float: left;
margin: 0px 0.5em;
}

Have I done something wrong here?

Sorry ... here's the HTML:

<div class="breadcrumb">
[[Breadcrumbs]]
</div>

For some reason the HTML won't show up, so here it is with the angle brackets removed:

?div class="breadcrumb"?
[[Breadcrumbs]]
?/div?

This isn't working!
Anyway, between the divs there's a Breadcrumbs snippet call surrounded by square brackets.

I have fixed this by hacking breadcrumb.class.php and insering list-item tags around the separator so that it will also float left in its proper place. Works fine now. However, someone must have a neater way of getting it to work properly.

Instead:
[s][/s]
use this: