如何将水平滚动的 div 向右对齐？

Question

在一个移动网站上，我有一系列充当面包屑导航链接的表格单元格。

它从左对齐开始，然后每次您进入导航更深处的另一个分支时，它会在右侧添加另一个 td。 表格设置为允许水平溢出滚动，因此可以访问整个导航路径而不会占用太多垂直空间。

我想要的是当表格的宽度超过视口时，水平滚动应该与右侧对齐，因此当前导航级别是可见的。 目前它保持与左侧对齐，除非手动滚动。

我尝试过使用浮动和边距，但无济于事。

请问有人有什么建议吗？

编辑 - 在 sn-p 中添加了更多行以说明问题。

.bcnavbar {
  display: block;
  border-collapse: separate;
  border-spacing: 0px;
  max-width: fit-content;
  overflow-x: scroll;
 /* scrollbar-width: none; */
  white-space: nowrap;
  padding-bottom: 5px;
}

.bcnavbar::-webkit-scrollbar {
   /*   display: none; */
}

.bcnav1 {
  width: fit-content;
  padding: 2px 20px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  border: 2px solid #006;
  border-left: none;
  border-right: none;
  background: url('images/mobile/navdivider.png') #eee no-repeat right center;
  box-shadow: 4px 4px 3px #999;
}

.bcnav2 {
  width: fit-content;
  padding: 2px 18px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  border-top: 2px solid #006;
  border-bottom: 2px solid #006;
  background: url('images/mobile/navdivider.png') #eee no-repeat right center;
  box-shadow: 4px 4px 3px #999;
}

.bcnav3 {
  width: fit-content;
  padding: 2px 10px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  background-color: #eee;
  border: 2px solid #006;
  border-left: none;
  border-radius: 0px 15px 15px 0px;
  box-shadow: 4px 4px 3px #999;
}

.bcnavspacer {
  width: 2px;
}

<table class="bcnavbar">
  <tr>
    <td class="bcnav1"><a class="bcnavlink" href="index.php" data-ajax="false">Home</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 1</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 2</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 3</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 4</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 5</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 6</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">5 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">4 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">3 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">2 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">1 level above</a></td>
    <td class="bcnav3">Current Page</td>
    <td class="bcnavspacer">&nbsp;</td>
  </tr>
</table>

Answer 1

我在您的 CSS 中添加了以下附加 CSS

.bcnavbar {
  direction: rtl;
}

.bcnavbar tr,
.bcnavbar td {
   -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

请检查以下代码 sn-p，希望这能满足您的需求。

.bcnavbar {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  max-width: fit-content;
  overflow-x: scroll;
 /* scrollbar-width: none; */
  white-space: nowrap;
  padding-bottom: 5px;
  direction: rtl;
}

.bcnavbar tr,
.bcnavbar td {
   -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.bcnavbar::-webkit-scrollbar {
   /*   display: none; */
}

.bcnav1 {
  width: fit-content;
  padding: 2px 20px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  border: 2px solid #006;
  border-left: none;
  border-right: none;
  background: url('images/mobile/navdivider.png') #eee no-repeat right center;
  box-shadow: 4px 4px 3px #999;
}

.bcnav2 {
  width: fit-content;
  padding: 2px 18px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  border-top: 2px solid #006;
  border-bottom: 2px solid #006;
  background: url('images/mobile/navdivider.png') #eee no-repeat right center;
  box-shadow: 4px 4px 3px #999;
}

.bcnav3 {
  width: fit-content;
  padding: 2px 10px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  background-color: #eee;
  border: 2px solid #006;
  border-left: none;
  border-radius: 0px 15px 15px 0px;
  box-shadow: 4px 4px 3px #999;
}

.bcnavspacer {
  width: 2px;
}

<table class="bcnavbar">
  <tr>
    <td class="bcnav1"><a class="bcnavlink" href="index.php" data-ajax="false">Home</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 1</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 2</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 3</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 4</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 5</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 6</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">5 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">4 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">3 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">2 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">1 level above</a></td>
    <td class="bcnav3">Current Page</td>
    <td class="bcnavspacer">&nbsp;</td>
  </tr>
</table>