Wie kann ich eine scrollbare horizontale Liste zentrieren, wenn sie kleiner als ihr übergeordneter Container ist? [Dupli

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: Wie kann ich eine scrollbare horizontale Liste zentrieren, wenn sie kleiner als ihr übergeordneter Container ist? [Dupli

by Guest » 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.

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]

Top