css - 菜单上的水平滚动

Question

移动设备。

我有以下带有按钮的列表。我希望他们不要换行，但用户必须向右滚动。

我已经尝试过overflow-x:scroll, float:left等，但无法让它工作。

 <ul class="nav nav-pills mb-2  ms-3" id="pills-tab" role="tablist" style="overflow: scroll;">
          <li class="nav-item ">
            <a class="btn btn-dark-blue active me-1" id="pills-company-tab" data-bs-toggle="pill" href="#company-tab"
               role="tab" aria-controls="pills-company" aria-selected="true">Företag</a>
          </li> <li class="nav-item ">
            <a class="btn btn-dark-blue active me-1" id="pills-company-tab" data-bs-toggle="pill" href="#company-tab"
               role="tab" aria-controls="pills-company" aria-selected="true">Företag</a>
          </li> <li class="nav-item ">
            <a class="btn btn-dark-blue active me-1" id="pills-company-tab" data-bs-toggle="pill" href="#company-tab"
               role="tab" aria-controls="pills-company" aria-selected="true">Företag</a>
          </li><li class="nav-item ">
            <a class="btn btn-dark-blue active me-1" id="pills-company-tab" data-bs-toggle="pill" href="#company-tab"
               role="tab" aria-controls="pills-company" aria-selected="true">Företag</a>
          </li>
      </ul>

标签： csstwitter-bootstrap

Answer 1

解决了这个问题 - 但是缺点是内部 .nav 必须具有固定的宽度。

  .wrapper {
    height: 50px;
    width: 100%;
    position: relative;
    overflow: auto;

    .nav {
      position: absolute;
      width: 500px;
    }
  }