Keeping inline <li>'s in place while altering their contents

My site has a navigation bar near the top of the page composed of inline <li>'s. The bar itself must be centered. Clicking on the links inside certain of these <li>'s replaces the links with <select>'s.

My problem is this: when the <select>'s appear, they shift all the other <li>'s over in order to accommodate their width. Unfortunately, it see开发者_如何学编程ms I can't set the width attribute of inline <li>'s. I therefore tried making the <li>'s float to the left and then assigning a width. This solved the position shifting problem, but now the navigation bar isn't centered!

Could anyone help me figure out the best way to approach this problem?

If you create the <select> inside the <li> tag you could treat the list item as a container and then absolutely position the select.

<li><select></select></li>

and then the css:

li{position:relative;} select{position:absolute;}

This way the select will not affect the position of the elements around it.

You could try using the inline-block option, although that doesn't work reliably in IE < 8, as it's only supported for elements that are 'naturally' in-line (which the select is, but the li itself is not).

Assign widths to your <li>s. That solves the shifting, but now you need to center them. So put a container around all those <li>s, and center this container. Works in all browsers.

You probably already have a <ul> you can use for this purpose, which is probably already inside a <div> or something. That would be very convenient. If your markup isn't like that, just wrap another <div> around the whole thing and center it.