[英]Expand horizontally not vertically
As you can see on the gif below, my Tabs
are expanding vertically. 如您在下面的gif上看到的,我的
Tabs
在垂直方向展开。 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. 我已经尝试过使用
white-space:nowrap
以及其他对其他人white-space:nowrap
东西,但是在我的情况下这是行不通的。
HTML: 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: 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%;
}
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;
}
Ref: https://jsbin.com/gogayo/edit?html,css,output
参考: https : //jsbin.com/gogayo/edit? html, css,输出
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. 您没有为li提供CSS,但是我想为它分配了一个浮点数,这就是为什么div堆叠到底部的原因,您需要删除它并应用display:inline-block。
.tab-add,
.contentTab {
float: none;
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.