Question

正如您在下面的gif上看到的那样，我的Tabs正在垂直扩展。但是我想让它们水平扩展。我已经尝试了white-space:nowrap，以及其他证明对其他人有效的事情，但它在我的情况下不起作用。

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%;
}

Answer 1

在.l_tabs{ }

中更改宽度

width: 500px;

到

width: 100%;

<强>更新

选中此fiddle作为参考。

那就行了！

Answer 2

试试这个：

.l_tabs > div {
    overflow-x: auto;
    white-space: nowrap;
}

完整代码：

.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;
}

参考：https://jsbin.com/gogayo/edit?html,css,output

Answer 3

你没有为li提供CSS，但我想有一个浮动分配给它，这就是为什么div堆叠到底部，你需要删除它并应用显示：而是内联块。

.tab-add,
.contentTab {
    float: none;
    display: inline-block;
}

不垂直水平展开

3 个答案: