cssでどうやっても要素が横並びにできない

Question

ナビゲーションバーを作成しているのですが、display:inline-blockや、float: left、親要素へのdisplay:flex等など様々に試したのですが、どうしてもliの個々の要素の後に改行が入ってしまい、liを横ならびにできません。
（もう何日もナビゲーションで引っかかっていて悲しくなってきました…笑）

.navbar-brandは左寄せ、その他のli要素は右寄せで表示させたいのですが、そもそも要素が横並びにできないところからつまずいてしまっています。

<div id="wrapper">
<div class="container">
<header>
	<nav id="gnav">
		<ul class="navbar-nav">
			<li class="navbar-brand"><a href="#"><img src="img/x.png"></a></li>
			<li><a href="#aboutus">ABOUT US</a></li>
			<li><a href="#field">FIELD</a></li>
			<li><a href="#price">PRICE</a></li>
			<li><a href="#blog">BLOG</a></li>
			<li class="nav-mail"><a href="mail:xxx"><img src="img/mail.png" alt="メール"></a></li>
			<li class="phone-num"><a href="tel:[phone]">09-9999-9999</a></li>
		</ul>
	</nav>
</header>

.....

</div>
</div>

ナビゲーションバーは、960pxのcontainerで包んでいます。

#gnav {
	background-color: #FFFFFF;
	font-weight: bold;
	width: 100%;
}

.navbar-brand {
	margin: 0;
	padding:0;
}

navbar-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.navbar-nav li {
    width: 140px;
    display: inline-block;
	
}

もしかしたらここでない、ほかの要素が影響しているのかとも思うのですが、初心者故解決策がわかりません。
もし追加で必要な情報等ありましたら書きたしますので、どうかご教示いただけますと幸いです。

Comments

[Lhankor_Mhy]

HTML5に wrapper というタグはないと思いますが、なんらかのフレームワークを使っているのですか？

[Lhankor_Mhy]

また、Bootstrap の質問タグがついていますが、ご提示のコードは Bootstrap と関係がないようです。
これは無視してかまいませんか？

[happyylemon]

ご指摘いただきありがとうございます！修正しました。全体的にはBootstrapをしています。最初に書いておかずすみません。実は、ナビゲーションバーも最初はBootstrapにて作成していたのですが、#navigation等使って設定すると.container幅である960pxをはみ出してしまうのを修正できなかったため、このような形になってしまっていました。
今のところはBootstrapは無視して大丈夫です。

<nav id="navigation" class="navbar fixed-top navbar-expand-lg">
<a class="navbar-brand" href="#">

[Lhankor_Mhy]

>今のところはBootstrapは無視して大丈夫

これは、①「Bootstrap を読み込んでいないので、その影響を無視しても大丈夫」ですか？
それとも②「Bootstrap を読み込んでいるので影響はあるが、Bootstrap に沿った記述をすることについて無視しても大丈夫」ということですか？

（私は②ではないかと思っています）

[happyylemon]

ご返信遅くなりすみません、②です！

Answer 1

Bootstrap 以外のご回答が出たようなので、Bootstrap を利用した回答をいたします。

    <nav id="gnav" class="navbar navbar-expand navbar-light bg-light">
    <!--           ^クラスを追加する-->

---

参考：

navbarを始める前に下記を確認してください。

• .navbar は .navbar-expand{-sm|-md|-lg|-xl} と color scheme が必要です。

Navbar - Bootstrap 4.2 - 日本語リファレンス

質問の変更を受けて追記

「Bootstrapは無視して大丈夫」とのことですが、おそらく読み込んではいると思うので、以下のようにしてみてはいかがですか？

.navbar-nav {
	flex-direction: row;
}

Comments

[happyylemon]

いろいろとありがとうございます。
結論から申し上げると、下でDaregadaさんがおっしゃっているように問題は提示されたコード以外にあるようで、一度立ち返ってナビゲーションをやはりBootstrapを使って作ることにしました。
navbarはみ出してしまう問題はこちら（https://teratail.com/questions/184050）で解決しました。
（nav要素に container クラスを付与）

いろいろな方のおかげで調べるとっかかりができて、大変勉強になりました。
ありがとうございます。

Answer 2

まず、HTMLに wrapper とか container とかのタグはありません。（headerやnavはHTML5で定義されますが。）
<div class="container"> というようにdiv要素にクラス名を付けるように変更してください。

あと、navbar-nav ul というセレクタも間違ってますね。
ul.navbar-nav としてください。

一応、提示のコードで横並びになっていますので、もし、横並びにならないないなら提示されていない部分が影響しているのでしょう。

.navbar-brandは左寄せ、その他のli要素は右寄せで表示させたいのですが、

横並びは今ならFlexBoxを使うのがお勧めです。下記で左寄せ、右寄せを指定できます。

#gnav {
  background-color: #FFFFFF;
  font-weight: bold;
  width: 100%;
}

ul.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 横並び */
}

.navbar-brand {
  margin: 0;
  padding:0;
  margin-right: auto; /* 左寄せ */
}

.navbar-nav li {
  width: 140px;
  display: inline-block;
}

Answer 3

提示されたHTMLファイルのheader要素の内容を、提示されたCSSファイルを適用した状態で表示すると、li要素の幅を140pxにしてdisplayプロパティをinline-blockにしているので、横並びで表示されます。

つまり、あなたの問題は提示されたコード以外にあります。たとえば、link要素のCSSファイルを指定する部分に問題があってスタイルシートが読み込まれていないなど。
HTMLファイルの内容を隠さずに、すべてを提示してください。

余談: 提示された部分にも問題があります(が、横並びにならない原因ではありません)。

• wrapperやcontainerという要素はHTMLにはありません。
• img要素には、alt属性による代替テキストの指定が必須です。
• スタイルシートのnavbar-nav ulの先頭に.が必要です。

Answer 4

結局質問した内容に対しての解決方法ではなくなってしまったのですが、問題点が自分で見つけられなかったため、Bootstrapを使用してナビゲーションバーを作ることにしました。

Bootstrapのnavbarを使うと、.containerで幅を960pxに指定していてもナビゲーションバーが画面幅いっぱいに広がってしまうのがネックだったのですが、
https://teratail.com/questions/184050
に記載の、nav要素に container クラスを付与という解決方法でなんとかなりました。