水平擴展而不是垂直

Question

如您在下面的gif上看到的，我的Tabs在垂直方向展開。 但是我希望它們水平擴展。 我已經嘗試過使用white-space:nowrap以及其他對其他人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%;

更新

檢查此小提琴以供參考。

那樣就可以了！

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，輸出

Answer 3

您沒有為li提供CSS，但是我想為它分配了一個浮點數，這就是為什么div堆疊到底部的原因，您需要刪除它並應用display：inline-block。

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