tags:

views:

827

answers:

1
+1  A: 

There's no gap between tabs in the screenshot you posted.

As for adding padding to the tabs, you can do this:

.list-as-tabs li a {
    padding: 3px 5px;
}

That gives the link top and bottom padding of 3px and left and right padding of 5px. This is nice because it gives you a bigger click target.

You state that you don't want to wrap but from what I can tell on the screenshot, there simply isn't enough room. You'll either have to make the font smaller or use shorter phrases for the tabs. Maybe this?

<ul class="list-as-tabs hover-links">
    <li><a href="#">Draft Heatmap</a></li>
    <li><a href="#">Security</a></li>
    <li><a href="#">Edit Heatmap/Platforms</a></li>
    <li><a href="#">Revision History</a></li>
</ul>
Tyson