CSS 滚动面包屑

Question

我正在寻找创建这样的东西： Material design BreadCrumb

我被 CSS 困住了。规范规定对象本身（列表中的第一项）应距左侧偏移 72px，列表项的其余部分应位于该项目的左侧，并如附件中所示滚动。图像。

我无法使列表正确滚动，但是当我尝试将某些东西绝对定位到左侧时，它不会滚动，如果我向右移动，它就会滚动。

我的 HTML 代码如下：

<nav>
  <ol>
    <li><a>Object</a></li>
    <li><a>Parent 1</a></li>
    <li><a>Parent 2</a></li>
    <li><a>Parent 3</a></li>
    <li><a>Parent 4</a></li>
    ....
  </ol>
</nav>

Answer 1

在主块内创建 2 个块 1，在块内放置overflow-x:auto并将主 div(块) 作为父 div 设置height 和overflow:hidden。您得到的输出与链接上显示的输出相同。

.breadcrumb {
  width:100%;
  height:20px;
  overflow:hidden;
}
.insidescroll{
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom:15px;
}

<div class="breadcrumb">
  <div class="insidescroll">
  <a href="#">Link #1</a>
  <a href="#">Link #2</a>
  <a href="#">Link #3</a>
  <a href="#">Link #4</a>
  <a href="#">Link #5</a>
  <a href="#">Link #6</a>
  <a href="#">Link #7</a>
  <a href="#">Link #8</a>
  <a href="#">Link #9</a>
  <a href="#">Link #10</a>
  <a href="#">Link #11</a>
  <a href="#">Link #12</a>
  </div>
</div>