javascript - 水平展开而不是垂直展开

Question

正如您在下面的 gif 中看到的，我的 Tabs 正在垂直扩展。但是我希望它们水平扩展。我已经尝试使用 white-space:nowrap 和其他证明对其他人有用的东西，但它对我的情况不起作用。

Image Example

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供大家引用。

这样就可以了!