Make your Blogger Tabs more robust with CSS

Whenever I set up a horizontal set of tabs under a header for a Blogger site's menubar, I want to be able to tell those tabs to center themselves, and be about the same width as my blog's header.

A few things tend to get in the way:

• Blogger won't just let you center the tabs with a setting.
• When the page displays with fonts other than the one I'm specifying as the preferred font, the differences in sizing can widen the tabs and make them wrap to the next line. It reminds me of those awful Windows 95 control panels!
• Even if you force them not to wrap, they get clipped by the edge of the list container!

So here's some CSS to fix those things:

.tabs .widget li, .tabs .widget li {float: none; display: inline;}

.tabs-inner .widget ul {

text-align: center;

white-space: nowrap;

overflow: visible;

}

By making the list items show up as inline objects instead of floating ones, we can force them to act like words in a sentence instead of like blocks, and that allows us to tell them not to wrap. If we don't tell them that they're words instead of list items, then we can't tell them to obey our wrapping commands.