menubarの設定で全てのメニューをバランスよく配置したい

Question

解決したいこと

menubarの設定で、写真のように2個目以降左側に余白が入ってしまっているので、余白を除き全てのメニューをバランスよく真ん中に配置したい。

該当のソースコード

NEW:/*全体の設定を追加いたしました。

<div class="nav-fix-pos">
<nav id="menubar">
<ul>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html" target="_blank" rel="noopener noreferrer">メニュー</a></li>
</ul>
</nav>
</div>

一部だけだと、余白がなくなる↓

/*メニュー１個あたりの設定*/
#menubar li{
	padding: 0 8px;
  flex: 1;
}

#menubar li a {
	margin: 0 auto;
  display: block;
  text-decoration: none;
  text-align: center;
  line-height: 45px;
  border-right: 1px dashed #ccc;
}

余白が入ってしまう↓

/*全体の設定
---------------------------------------------------------------------------*/
body {



	margin: 0px;padding: 0px;
	color: #000;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 15px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {
	margin: 0px;padding: 0px;font-size: 100%;}
ul {
  list-style: none;
}
	ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}


/*メニューブロックの設定*/
#menubar{
	max-width: 1200px;	/*最大幅。#header、.contents、#pagetopと数字を合わせる*/
	position: relative;z-index: 2;
	margin: 0 auto;
	background: #F0C;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.9);	/*背景色。255,255,255は白の事で、最後の0.9は透明度90%の事。*/
	height: 45px;		/*メニューブロックの高さ。ここを変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
	padding: 10px 0;	/*上下、左右へあける余白。ここの10pxの数字を変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
}
/*トップページのメニューブロックの設定*/
#top #menubar{
	border-radius: 10px;	/*角丸のサイズ*/
	-webkit-box-shadow: 2px 5px 8px rgba(0,0,0,0.2);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の0.2は透明度20%の事。*/
	box-shadow: 2px 5px 8px rgba(0,0,0,0.2);			/*同上*/
}
/*メニュー１個あたりの設定*/
#menubar li{
	padding: 0 8px;
  flex: 1;
}

#menubar li a {
	margin: 0 auto;
  display: block;
  text-decoration: none;
  text-align: center;
  line-height: 45px;
  border-right: 1px dashed #ccc;
}

/*１個目メニューの設定*/
#menubar li:first-child {
	margin-left: 2.8%;	/*左側にバランスよく余白を入れる*/
}

#menubar li:first-child a {
	border-left: 1px dashed #ccc;	/*左側の線の幅、線種、色*/
}
/*マウスオン時と、現在表示中(current)設定*/
#menubar li a:hover,
#menubar li.current a {
	color: #fff;	/*文字色*/
	background:#f0c;	/*背景色*/
}
/*小さい端末用(画面幅800px以下)メニューを表示させない*/
#menubar-s {
	display: none;#top #menubar {
		border-radius: 10px;	/*角丸のサイズ*/
		-webkit-box-shadow: 2px 5px 8px rgba(0,0,0,0.2);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の0.2は透明度20%の事。*/
		box-shadow: 2px 5px 8px rgba(0,0,0,0.2);			/*同上*/
	}
	/*メニュー１個あたりの設定*/
	#menubar li {
		padding: 0 8px;
	  flex: 1;
	}

	#menubar li a {
		margin: 0 auto;
	  display: block;
	  text-decoration: none;
	  text-align: center;
	  line-height: 45px;
	  border-right: 1px dashed #ccc;
	}
}
/*３本バーアイコンを表示させない*/
#menubar_hdr {
	display: none;
}

試したこと

・HTMLの余白を削除
・jsfiddleでどこまでが余白が入るか確認
・google dev toolsで1個目のメニューと2個目のメニューの違いを比較↓

#menubar li:first-child {
    margin-left: 2.8%;
}

が1個目には入っていた。
・ulのpaddingをピンポイントを0にする
・シンプルなソースコードに変更（回答参照）

その他予想したこと（どう修正したらいいかまでは分からず）

・余白はlist-styleプロパティをnoneに指定した跡？
・display: flex;　に変更したのでどこかが対応していない？
・各ブラウザが持つmarginやpaddingの初期値が反映されている？

再現するために必要だと思われるソースコード

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
	clear: both;
	max-width: 1200px;	/*最大幅。#header、#menubar、.contentsと数字を合わせる*/
	margin: 0 auto;
}
#pagetop a {
	text-decoration: none;
	text-align: center;
	display: inline-block;
	float: right;
	color: #000;		/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	padding: 0px 30px;	/*上下、左右へのボックス内余白*/
	background: #e2458a;	/*背景色*/
	border-radius: 4px 4px 0px 0px;	/*角丸のサイズ。左上、右上、右下、左下。*/
}
/*マウスオン時*/
#pagetop a:hover {
	background: #e2458a;	/*背景色*/
	color: #FFF;			/*文字色*/
}

/*MENUページのページ内メニュー
---------------------------------------------------------------------------*/
ul.navmenu {
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: left;
}
ul.navmenu li {
	display: inline-block;
	padding: 10px;
}

Comments

[itagagaki]

再現させるのにコードが不十分です。
少なくともクラス nav-fix-pos に対応するCSSコードが無いようです。

[Ponppp123]

コメントありがとうございます。
もう少し該当ソースコードの情報を増やしてみようと思います。
nav-fix-pos　はテキストエディタで検索してみたのですが、該当するものがなく…そのせいかもしれないですね。
もう少し調べてみます。

[Lhankor_Mhy]

問題が再現しませんでした。

Answer 1

こうゆうシンプルな感じだと駄目なんでしょうか？
最初の画像に書いてあること以外で何か条件があったりしますか？

#menubar a {
  border-right: 1px solid olive;
}

#menubar li:last-of-type a {
  border-right: none;
}

ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

a {
  color: tomato;
  text-decoration: none;
  padding: .05em 2em;
  margin-left:-1px;
}

<div id="menubar">
  <ul>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
  </ul>
</div>

Comments

[Ponppp123]

ご回答ありがとうございます。
上記のシンプルなものを試してみましたところ、何も表記されなくなってしまいました。
CSSのみ変化すると、何も変化がなく、HTMLとCSSを変化すると、全て消えてしまします。
分かりにくい日本語で申し訳ありません。

[recal]

すみません!border指定部分を大きくコピペ漏れしてました。

こちらで確認出来ます。

https://codepen.io/recal/pen/QWqKgqy

[Ponppp123]

何度も試していただき、確認用のソースコードまでありがとうございます。
結果としては、真っ白にはならなかったものの、変化がなく文字の左側に余白が残るままでした。
もしかすると、該当ソースコード以外の場所で何か変更しないといけない箇所があるのかもしれません。
もう一度、確認してみます。
この度は当方の力不足でご回答から解決ができず申し訳ありません。