CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Travis
Travis

Reputation: 2245

Equal LI widths fill 100% width

I want to make each LI equal width and fill 100% of the width on Bootstrap tabs.

I have been reading that you need to have 

ul{display:table}
li{display:table-cell}

But this just isn't working for me, i am not sure if it is Bootstrap that is causing this or not. But i need to be able to accommodate 3 - 5 tabs depending on the product page.

I have a fiddle here http://jsfiddle.net/xQ8Q8/1/ to shows what i am trying to do.

Upvotes: 0

Views: 94

Answers (1)

azeós
azeós

Reputation: 4901

There is a float: left defined in .nav-tabs > li. Set float: none in your CSS to override that behavior:

.nav-tabs > li {
    float: none;
}

Now you have to correct the UL height:

#productReviewTab {
    display: table;
    width: 100%;
    margin-bottom: 31px; // Just to maintain your initial height
}

Yes, I removed the height property, you could set it to 44px if you want. For what I test, is the same.

Upvotes: 1

Related Questions