3

親の左側と右側に交互に浮かぶようにスタイル設定されたナビゲーション リンクのリストがあり、中央にギャップがあります。問題は、小さな画面では、結果として一部のリンクが非表示になることです。親コンテナー (固定サイドバー) は全体としてスクロールしません。サイドバー全体をスクロールする必要は避けたいと思います。リンクの 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 ユーザーにのみ表示されます。

何か案は?

4

1 に答える 1