Reputation: 8292
As you can see on the gif below, my Tabs
are expanding vertically. However I want them to expand horizontally. I already tried with white-space:nowrap
, and other things that proved to work for other people, but it just doesn't work in my case.
HTML:
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add">
<li class="contentTab">
<li class="contentTab">
<li class="contentTab">
<li class="contentTab">
<li class="contentTab">
<li class="contentTab active">
</ul>
</div>
</div>
CSS:
.l_tabs {
background: #474544 none repeat scroll 0 0;
display: block;
height: 57px;
overflow: auto;
white-space: nowrap;
width: 500px;
}
.l_tabs > div {
background-color: white;
height: 40px;
padding-top: 4px;
width: 99%;
}
Upvotes: 0
Views: 184
Reputation: 132
You don't provide the CSS for the li, but I guess there's a float assigned to it, that's why the div stacked to bottom, you need to remove it and apply display: inline-block instead.
.tab-add,
.contentTab {
float: none;
display: inline-block;
}
Upvotes: 0
Reputation: 379
Try this:
.l_tabs > div {
overflow-x: auto;
white-space: nowrap;
}
Full Code:
.l_tabs {
background: #474544 none repeat scroll 0 0;
display: block;
height: 57px;
width: 500px;
}
.l_tabs > div {
background-color: #fff;
height: 40px;
padding-top: 4px;
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.l_tabs li {
display: inline-block;
padding: 0 50px;
}
Upvotes: 0
Reputation: 3461
Change your width in .l_tabs{ }
width: 500px;
to
width: 100%;
Updated
Check this fiddle for your reference.
That would do it!
Upvotes: 1