Google Chromeで閲覧した際、縦になってしまうnavbarの要素を横並びにしたい

前提・実現したいこと

ＣSS初心者です。
作成した担当者がやめてしまい、聞こうにも連絡が取れないので困っています。

Google Chromeで閲覧する際、縦になっているnavbarの要素を横並びにしたいです。

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

Microsoft Edgeで確認すると、navbarの要素の横並びができているのですが、
Google Chromeで確認すると、navbarの要素の横並びができません。

該当のソースコード

該当箇所が不明瞭なので、ご指摘いただければ追加・修正いたします。
JSFiddleで確認していただき、ソースコード自体には不備がないことが分かりました。
どこかで打ち消されているのかもしれません。

HTML
1<div class="nav-fix-pos">
2  <nav id="menubar">
3    <ul>
4      <li><a href="index.html">メニュー</a></li>
5      <li><a href="index.html">メニュー</a></li>
6      <li><a href="index.html">メニュー</a></li>
7      <li><a href="index.html">メニュー</a></li>
8      <li><a href="index.html">メニュー</a></li>
9      <li><a href="index.html">メニュー</a></li>
10      <li><a href="index.html">メニュー</a></li>
11      <li><a href="index.html">メニュー</a></li>
12      <li><a href="index.html">メニュー</a></li>
13    </ul>
14  </nav>
15</div>

CSS
1ul {
2list-style: none;
3}
4
5/*メインメニュー
6---------------------------------------------------------------------------*/
7/*メニューブロックの設定*/
8#menubar {
9	max-width: 1200px;	/*最大幅。#header、.contents、#pagetopと数字を合わせる*/
10	position: relative;z-index: 2;
11	margin: 0 auto;
12	background: #F0C;	/*背景色（古いブラウザ用）*/
13	background: rgba(255,255,255,0.9);	/*背景色。255,255,255は白の事で、最後の0.9は透明度90%の事。*/
14	height: 45px;		/*メニューブロックの高さ。ここを変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
15	padding: 10px 0;	/*上下、左右へあける余白。ここの10pxの数字を変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
16}
17/*トップページのメニューブロックの設定*/
18#top #menubar {
19	border-radius: 10px;	/*角丸のサイズ*/
20	-webkit-box-shadow: 2px 5px 8px rgba(0,0,0,0.2);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の0.2は透明度20%の事。*/
21	box-shadow: 2px 5px 8px rgba(0,0,0,0.2);			/*同上*/
22}
23/*メニュー１個あたりの設定*/
24#menubar li {
25	float: left;
26	  /*左に回り込み*/
27	  width: 11.9%;
28	  /*メニュー幅（※8個の場合）*/
29	}
30
31#menubar li a {
32	text-decoration: none;
33 display: inline-block;
34 text-align: center;
35 line-height: 45px;
36 /*行間（高さ）*/
37 border-right: 1px dashed #ccc;
38 /*右側の線の幅、線種、色*/
39}
40
41/*１個目メニューの設定*/
42#menubar li:first-child {
43	margin-left: 2.8%;	/*左側にバランスよく余白を入れる*/
44}
45#menubar li:first-child a {
46	border-left: 1px dashed #ccc;	/*左側の線の幅、線種、色*/
47}
48/*マウスオン時と、現在表示中(current)設定*/
49#menubar li a:hover,
50#menubar li.current a {
51	color: #fff;	/*文字色*/
52	background:#f0c;	/*背景色*/
53}
54/*小さい端末用(画面幅800px以下)メニューを表示させない*/
55#menubar-s {
56	display: none;
57}
58/*３本バーアイコンを表示させない*/
59#menubar_hdr {
60	display: none;
61}

試したこと

・flexを使用
・floatプロパティ追加
・親要素にnon-wrapを指定
・親要素にdisplay:flexを指定
・display:blockを消す
・flex-direcion:columnがないかチェック

補足情報（FW/ツールのバージョンなど）

atom

m.ts10806

2021/12/10 03:38

「グーグル」は企業名です。ブラウザのことを言いたいのでしたら「Chrome」としたほうが良いです。タイトルだけ読むと意味が繋がらないので。

Ponppp123

2021/12/10 03:43 編集

教えていただいてありがとうございます。どんな表記にしたらよいか悩んでいたので…。すぐに修正いたします。

m.ts10806

2021/12/10 04:18

悩んだらフルネームコピペで良いと思います。要約省略したりローカルな呼称だと伝わりませんし。

Ponppp123

2021/12/10 05:07

かしこまりました。ありがとうございます。分かりやすい表記を心掛けていこうと思います。

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

回答1件

ベストアンサー

横並びできてるじゃないですか？
https://jsfiddle.net/heroyct/jp8Lvk4f/8/

flexを使った方が簡単だと思います、試してみてください。
https://jsfiddle.net/heroyct/fuwnogdy/5/

投稿2021/12/10 06:18

heroyct

総合スコア434

Ponppp123

2021/12/10 06:41

お忙しい中ご回答いただき、また試していただき誠にありがとうございます。 flexを使い再度アップロードしましたが、Google Chromeで閲覧をすると変化がありませんでした。 Microsoft Edgeで閲覧すると、きれいに並んでおります。後述のどこかで打ち消されているか、アニメーションの段階（java?は改変していないのですが・・・）で不備があるのかもしれません。