Menu icon Foundation
Evenly spaced full-width tabs (100% of window)

Is it possible to have 5 standard Foundation tabs evenly span the width of the window? In the example of 5 tabs each one would take up 20% of the screen?

<dl class="tabs" data-tab>
    <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
    <dd><a href="#panel2-2">Tab 2</a></dd>
    <dd><a href="#panel2-3">Tab 3</a></dd>
    <dd><a href="#panel2-4">Tab 4</a></dd>
    <dd><a href="#panel2-5">Tab 5</a></dd>
</dl>
            

         

tabsspanwidthfullevenevenly

Is it possible to have 5 standard Foundation tabs evenly span the width of the window? In the example of 5 tabs each one would take up 20% of the screen?

<dl class="tabs" data-tab>
    <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
    <dd><a href="#panel2-2">Tab 2</a></dd>
    <dd><a href="#panel2-3">Tab 3</a></dd>
    <dd><a href="#panel2-4">Tab 4</a></dd>
    <dd><a href="#panel2-5">Tab 5</a></dd>
</dl>
            

         
Philip over 5 years ago

.tabs {
margin: 0 !important;
@include block-grid(3);
li {
padding: 0;
a {
text-align: center;
}
}
}

This will remove the whitespace.

Benjamin Patch over 5 years ago

Yes, try using Foundation's Block Grid:
http://foundation.zurb.com/docs/components/block_grid.html

neil kanth over 5 years ago

White-space gets introduced below the tabs and above the content.
How can this space be removed?

Joel Laguerre over 5 years ago

Specifically block grids that use semantic markup with sass mixins. The tabs won't fire when I use 'ul' tags to form the navigation links and block grids don't work well with the 'dl' tag.

http://foundation.zurb.com/docs/components/block_grid.html#semantic-markup-with-sass-mixins

I added this bit to my sass:

.your-class-name {
@include block-grid(3);
}

and BAM! even widths with my styling left intact.