Html – How to place a non-tab item in a jQuery UI Tab Bar using valid XHTML

css, html, jquery-ui, tabs

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?

Best Solution

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.