Как я могу выровнять div с горизонтальной прокруткой вправо? ⇐ CSS

[Anonymous]

На мобильном веб-сайте у меня есть ряд ячеек таблицы, которые действуют как навигационные ссылки.
Сначала он выравнивается по левому краю, а затем каждый раз, когда вы переходите на другую ветку, глубже в навигацию. , он добавляет еще один td в правый конец.
Таблица настроена так, чтобы позволить горизонтальному переполнению прокручиваться, поэтому весь навигационный путь доступен, не занимая слишком много места по вертикали.
Мне бы хотелось, чтобы, когда ширина таблицы превышала область просмотра, горизонтальная прокрутка должна была выравниваться по правому краю, чтобы был виден текущий уровень навигации.
На данный момент он остается выровненным. влево, если не прокручивать вручную.
Я пробовал экспериментировать с плавающей запятой и полями, но безрезультатно.
Пожалуйста, у кого-нибудь есть предложения?< /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;
}

Код: Выделить всё

[url=index.php]Home[/url]
[url=link.php]Link 1[/url]
[url=link.php]Link 2[/url]
[url=link.php]Link 3[/url]
[url=link.php]Link 4[/url]
[url=link.php]Link 5[/url]
[url=link.php]Link 6[/url]
[url=link.php]5 levels above[/url]
[url=link.php]4 levels above[/url]
[url=link.php]3 levels above[/url]
[url=link.php]2 levels above[/url]
[url=link.php]1 level above[/url]
Current Page
 

Подробнее здесь: https://stackoverflow.com/questions/697 ... -the-right