### 前提横スクロールする横並びのメニューを作成しています。 [サンプル](https://jsbin.com/laxodogoha/1/edit?output) また、隠れているメニューの存在を知らせるために、メニューの両サイドに矢印のようなマークを配置しています。 ### 発生している問題上記サンプルのページで、HTML、CSS、JavaScript、Consoleすべてのタブを表示させると、メニュー両端にある矢印マークとメニュー枠の余白が狭まってしまいます。逆の言い方をすれば、Outputタブのみを表示にすると余白が広がってしまいます。 ### 実現したいことウインドウサイズを問わず、メニューの両端と矢印マーク間の余白を固定したいです。 ### 該当のソースコード ```CSS html{ text-align: center } button { background: none; border: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .buttons { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100px; height: 100px; margin: 0 1%; border: 5px solid #000; background-color: #fff; cursor: pointer; } .fab, .fas { font-size: 50px; } a { line-height: 0; } #css{ display: none; } #wrap{ overflow: hidden; } #wrap2{ overflow-x: auto; margin: auto; max-width: 50%; } ul{ display: inline-table; border-collapse: separate; border-spacing: 1em .4em; } li{ display: table-cell; } .fa-chevron-left{ position: absolute; bottom: 80%; left: 15% } .fa-chevron-right{ position: absolute; bottom: 80%; right: 15% } ``` ```HTML

``` ### 試したことそもそも、矢印マークをメニューの両端に配置することに苦戦しました。苦戦の結果、矢印マークそれぞれに、 ```CSS position: absolute; bottom: 80%; left: 15% ``` を設定することで見かけ上の実装はできました。しかし、この方法がまったくもって強引な方法なのは重々承知しており、この方法ゆえに上記の問題が発生していることも存じています。また、左矢印マークを```

```の上に、右矢印マークを``````の下に記述することで、左矢印 ― メニュー ― 右矢印というレイアウトになりました。しかし、ウインドウサイズが小さくなると、左矢印メニュー右矢印のように縦に重なってしまい、実現したいレイアウトではなくなりました。

	@@ -1,1 +1,1 @@
1	- 横スクロールメニューの両端に矢印を配置したいです。
1	+ 横スクロールメニューの両端に矢印マークを配置したいです。

質問編集履歴