How do I place a non-tab item in a jQuery UI Tab Bar using valid XHTML?

Question

I am creating a standard jQuery UI tab bar, nothing special except for the following: I would like to include a hyperlink on the right-hand side of the tab bar to serve as a log-out button. I know that I can accomplish this using invalid XHTML by writing the tab container like this:

    <div id="tabs">
        <ul>
            <li><a href="tab1.jsp">Tab 1</a></li>
            <li><a href="tab2.jsp">Tab 2</a></li>
            <li><a href="tab3.jsp">Tab 3</a></li>

            <span class="logout">
                <a href="logout.jsp">Log out</a>
            </span>
        </ul>
    </div>

and using the CSS:

.logout
{
   float: right;
}

It works beautifully, but it's also not valid (because of the span child of the ul).

Is there a correct way to do this?

Answer 1

Can't you just put the span as a child of the div instead of the ul? Obviously you'd have to change the css a tiny bit.