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

问题描述 投票：0回答：2

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

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

我想要的是，当表格的宽度超过视口时，水平滚动应与右端对齐，以便当前导航级别可见。 目前，除非手动滚动，否则它会保持向左对齐。

我尝试过使用浮动和边距进行实验，但没有成功。

请问大家有什么建议吗？

编辑 - 添加更多行到代码片段以说明问题。

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

html css alignment horizontal-scrolling
2个回答
1
投票

我已将以下附加 CSS 添加到您的 CSS 中

.bcnavbar {
  direction: rtl;
}

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

请检查以下代码片段，我希望这能满足您的需求。

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

0
投票

我找到了一种方法来做到这一点（只要有问题的 div 加载到您想要将页面加载到的可见视口中），这要归功于 Javascript 的 ScrollIntoView 函数：

    function navcentre() {
      var navdiv = document.getElementById("finalnav");
      navdiv.scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "center"
      })
    }
    .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;
    }
<body onload="navcentre();>
<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" id="finalnav">&nbsp;</td>
  </tr>
</table>
</body

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.