親の左側と右側に交互に浮かぶようにスタイル設定されたナビゲーション リンクのリストがあり、中央にギャップがあります。問題は、小さな画面では、結果として一部のリンクが非表示になることです。親コンテナー (固定サイドバー) は全体としてスクロールしません。サイドバー全体をスクロールする必要は避けたいと思います。リンクの CSS コードは次のとおりです。
#links {
margin: 10px 0;
text-align: center;
overflow: hidden;
}
a.sidebarlink {
display: block;
padding: 3px 5px;
background-color: rgb(87,10,79);
color: white;
font-weight: bold;
width: 43%;
max-height: 17px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
text-shadow: none;
margin: 2px 0px;
}
a.sidebarlink:hover {
animation: sidebarlink 0.4s;
-webkit-animation: sidebarlink 0.4s;
border-width: 5px !important;
}
#links a:nth-child(2n-1) {
float: left;
clear: left;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-left: 0px solid white;
text-align: right;
}
#links a:nth-child(2n) {
float: right;
clear: right;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-left: none;
border-right: 0px solid white;
text-align: left;
margin: 2px 0px 2px 7px;
}
それで問題は...あまり手間をかけずに、スクロールバーを中央に表示するように設定できますか? このページはシンプルな Tumblr ブログです (ここ)。私が話していることを見る必要がある場合は、左側のサイドバーのリンクが説明どおりに配置されています。
必要に応じてマークアップを変更できますが、コンテナーを中央で分割して 2 つのスクロールバーで終わるのではなく、単一のスクロールバーが必要です。
可能性は低いと思いますが、CSS のみにしたいと思います。可能であれば、Webkit スクロールバー クラスを使用する可能性が最も高いと思われるため、Chrome ユーザーにのみ表示されます。
何か案は?