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

感谢所有帮助。关键的见解是使用

direction: rtl;
padding-right: calc(100vw - 72px);

在列表本身上，默认情况下滚动到右边，包括填充和

transform: translateX(100%);
margin-right: -100%;

在列表项上将它们按自己的大小向右偏移，同时保留它们之间的适当间距。

如果其他人想要这样做，请参考以下内容：

nav {
  width: 100%;
  overflow-x: hidden;
  height: 56px;
}
nav ol {
  overflow-x: scroll;
  height: 100%;
  direction: rtl;
  padding-right: calc(100vw - 72px);
  -webkit-overflow-scrolling: touch;
}
nav li {
  display: inline-block;
  transform: translateX(100%)
  padding: 0 8px;
  margin: 0 8px 0 -100%;
}

Answer 2

代码中的主要逻辑是使用webkit-overflow-scrolling:touch，这使得手机中的滚动更加流畅

＆＃13;

nav li {
    display: table-cell;
    padding: 0 14px;
}
ol {
    padding: 0;
    display: table;
}
nav {
    width: 300px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
nav li a {
    white-space: nowrap;
}

＆＃13;

<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>
    <li><a>Parent 5</a></li>
    <li><a>Parent 6</a></li>
  </ol>
</nav>

＆＃13;

Answer 3

在主区块内部进行2个区块1，在区块内部放置overflow-x:auto，将主要div（区块）作为父级div设置heigh t和overflow:hidden。您在链接上显示的输出相同。

＆＃13;

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

＆＃13;

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

＆＃13;

用于滚动面包屑的CSS

3 个答案: