横とたてのスクロールバーを消したのですが、 下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。

Question

https://teratail.com/questions/27017のつづき。

・わかりにくいので下記で再現してみました。こちらを見てみてください。
https://jsfiddle.net/80od313c/10/

下記サイトのサンプル３の方法で、横とたてのスクロールバーを消したのですが、
下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。
text-align: center;は値での指定ができないようですが、どうずれたぶんずらすのでしょうか？
width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す /
height: 105%;/ 下のスクロールバー */
http://qiita.com/naru0504/items/ff0c77775223dc5a9148

・CSS

/* 左から出てくるdrawer-menu */
[id="drawermenu"] {
z-index: 300;
width: 100%;
height: 100%;
position: fixed;
top: 0;
overflow-y: hidden;
padding-top: 2.8rem;
text-align: center;
cursor: pointer;
margin-left: -100%;
transition-propety:all;
transition-duration:1s;
}

[id="drawermenu"] ul {
overflow-y: scroll;
overflow-x: scroll;
width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す /
height: 105%;/ 下のスクロールバー */
}

[id="drawermenu"] li {
margin-bottom: 0.2rem;
background: rgba( 229, 228, 255, 0.3 );
}

[id="drawermenu"] li a {
height: 6rem;
line-height: 6rem;
margin: 0 auto;
color: #fff;
font-size: 2rem;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,.9);
}

@media (min-width: 960px) {
[id="drawermenu"] li a {
font-size: 2.5rem;
}
}

Answer 1

<li>タグにwidth: 95.24%;を指定してはいかがでしょう 100 / 105 = 0.95238095

もしくは<ul>に5%分のpaddingを指定してもいいと思います

Comments

[退会済みユーザー]

paddingをつけるとは下記のようなことでしょうか？
[id="drawermenu"] ul {
overflow-y: scroll;
overflow-x: scroll;
width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す */
height: 101%;/* 下のスクロールバー */
padding-right: 5%;
}

[退会済みユーザー]

<li>タグにwidth: 95.24%;を指定してはいかがでしょう
100 / 105 = 0.95238095

下記のような感じでしょうか、確かに中央ぞろえになっていそうなのですが、右側にその分の隙間が開いてしまいました。
[id="drawermenu"] ul {
overflow-y: scroll;
overflow-x: scroll;
width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す */
height: 101%;/* 下のスクロールバー */
/* padding-right: 5%; */
}

[id="drawermenu"] li {
width: 95.24%;
margin-bottom: 0.2rem;
background: rgba( 229, 228, 255, 0.3 );
}

[退会済みユーザー]

下記の形だと中央ぞろえで、背景ありにはできましたが、
背景がliの上下の隙間のないただの白い背景になってしまいました。

[id="drawermenu"] ul {
overflow-y: scroll;
overflow-x: scroll;
width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す */
height: 101%;/* 下のスクロールバー */
/* padding-right: 5%; */
background: rgba( 229, 228, 255, 0.3 );
}

[id="drawermenu"] li {
width: 95.24%;
margin-bottom: 0.2rem;
/*background: rgba( 229, 228, 255, 0.3 ); */
}

liの上下の隙間はあきらめるしかないですかね。