Wie kann ich eine scrollbare horizontale Liste zentrieren, wenn sie kleiner als ihr übergeordneter Container ist? [Dupli
Posted: 20 Jan 2025, 16:17
Ich möchte ein Menü, das horizontal gescrollt/gezogen werden kann, wenn es nicht in das Ansichtsfenster passt.
Ich habe bereits einen Weg gefunden und es funktioniert genauso gut, wie es ausgerichtet ist links, aber ich kann keine Möglichkeit finden, das Menü zu zentrieren, wenn es kleiner als das Ansichtsfenster ist.
Ich habe bereits einen Weg gefunden und es funktioniert genauso gut, wie es ausgerichtet ist links, aber ich kann keine Möglichkeit finden, das Menü zu zentrieren, wenn es kleiner als das Ansichtsfenster ist.
Code: Select all
.tabs-box-wrapper {
padding: 10px;
position: relative;
overflow-x: hidden;
border: 1px solid #000;
}
.tabs-box-wrapper .tabs-box {
display: flex;
flex-direction: row;
gap: 25px;
list-style: none;
overflow-x: scroll;
margin-bottom: 0;
padding-inline-start: 25px;
padding-inline-end: 25px;
scroll-snap-type: x mandatory;
scrollbar-width: 0px;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tabs-box-wrapper .tabs-box::-webkit-scrollbar {
display: none;
}
.tabs-box .tab {
white-space: nowrap;
scroll-snap-align: center;
border: 1px solid #000;
padding: 0 25px;
}Code: Select all
[list]
[*]AAAAA
[*]BBBBB
[*]CCCCC
[*]DDDDD
[*]EEEEE
[*]FFFFF
[*]GGGGG
[/list]