横並びメニューの区切り線

前提・実現したいこと

横並びメニューの区切り線を斜めにした時
文字を真ん中にしたいです。

発生している問題・エラーメッセージ

文字が右に寄ってしまいます

該当のソースコード

html
1<nav class="regular">
2	<ul>
3   　 <li><a href="#">menu1</a></li>
4   　 <li><a href="#">menu2</a></li>
5  　  <li><a href="#">menu3</a></li>
6  　  <li><a href="#">menu4</a></li>
7 　   <li><a href="#">menu5</a></li>
8	</ul>
9</nav>

css
1nav ul {
2    display: flex;
3    flex-flow: row;
4    justify-content: center;
5    margin: 20px 0;
6    padding: 6px;
7    list-style-type: none;
8	font-size: 0.9em;
9	font-weight: bold;
10}
11nav li{
12	-webkit-transform: skewX(150deg);
13    -moz-transform: skewX(150deg);
14    transform: skewX(150deg);
15    border-right: 1px solid #489E3C;
16}
17li:last-child{
18	border-right:none;
19}
20nav a {
21    display: block;
22    border-radius: 4px;
23    padding: 0 10px;
24    color: #489E3C;
25    text-decoration: none;
26	transform: skewX(-150deg);
27}
28nav li a:hover {
29    color: #72C866;
30}
31

行動規範の内容に同意します

回答2件

以下を試してみてください
0. HTMLに「全角スペース」が含まれているので削除
0. CSS「nav li」に中央寄せ「text-align: center;」を追加

CSS
1nav li{
2  -webkit-transform: skewX(150deg);
3  -moz-transform: skewX(150deg);
4  transform: skewX(150deg);
5  border-right: 1px solid #489E3C;
6  text-align: center;  /* ← 追加 */
7}

投稿2019/04/12 06:59

yoshinavi

総合スコア3523

kama_111

2019/04/12 07:36

全角スペースが見つけられないのですが、どこにあるんでしょうか（ ; ; ）

yoshinavi

2019/04/12 10:23

エディターの「全角スペース表示」機能は無いのでしょうか？もし無いのであれば、これを機に、その機能があるタイプに換える事をオススメします。どんなベテランでも、「打ち間違い」は必ずありますし、全角スペースが与える影響は無視出来ません。＞どこにあるんでしょうか →　HTML提示コードの<li>の前（左側）にあります。 <li>の背景に色を付けて、ブラウザで見てください。<li>の要素間が離れていますよね？そこに入っています。

行動規範の内容に同意します

ベストアンサー

1．aタグの下にspanで囲んであげる

html
1<nav class="regular">
2    <ul>
3      <li><a href="#"><span>menu1</span></a></li>
4   　 <li><a href="#"><span>menu2</span></a></li>
5  　  <li><a href="#"><span>menu3</span></a></li>
6  　  <li><a href="#"><span>menu4</span></a></li>
7 　   <li><a href="#"><span>menu5</span></a></li>
8    </ul>
9</nav>

2．aタグをflex要素にしつつ横幅を設定してspanをセンターへそのspanにpadding-rightつける

css
1nav a {
2  display: flex;
3  justify-content: center;
4  border-radius: 4px;
5  width: 63.39px;
6  color: #489E3C;
7  text-decoration: none;
8  transform: skewX(-150deg);
9}
10nav a span {
11  padding-right: 2px;
12}