javascript - 用于滚动面包屑的 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

在主 block 内创建 2 block 1，在 block 内放置 overflow-x:auto 和 main div(block) 作为父 div 设置 height 和 overflow :隐藏。你得到的输出与你在链接上显示的相同。

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