How to place an item without tabs in a jQuery UI tab bar using valid XHTML?

Question

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

<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 CSS:

 .logout { float: right; } 

It works beautifully, but it is also invalid (due to span ul child).

Is there a proper way to do this?

Answer 1

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