CSS ヘッダーに関する質問

Question

最近、web制作を始めた初心者です。
初歩的な部分が欠けているかもしれないので、分かりやすく教えて欲しいです。

background-colorを残しつつ、画像と検索窓を横並びにできる方法はないのでしょうか？

.Search-box {
　　　display: flex
}
.header-logo {
　　　display: flex
}

↑ただ中央揃えになっただけ

.Search-box {
　　　float: right;
}
.header-logo {
　　　float: left;
}

↑横並びには出来たがbackground-colorが消えた

以上の２つを試したのですが、できませんでした。
画像と検索窓を横並びにできる方法を、教えていただけると有り難いです。

Comments

[Lhankor_Mhy]

「background-colorを残しつつ」とのことですが、background-colorがご提示のコードにはないようです。
また、HTMLもないようです。

[退会済みユーザー]

HTMLとbackground-colorの記載を忘れていました...

```HTML
<header>
<img class="header-logo" src="img/header-logo" alt="ヘッダーロゴ"</div>
<div class="header-logo">header-logo</div>
</header>
```

```CSS
.header {
　　background-color: Gray;
}
```

[Lhankor_Mhy]

そのコードだと検索窓がなさそうですが。

Answer 1

画像と検索窓を横並びに

HTMLとbackgroundがご提示されていないので想像で回答すると、こんな感じではないでしょうか。

	<header>
		<div class="Search-box">Search-box</div>
		<div class="header-logo">header-logo</div>
	</header>

		header {
			background: gray;
			display: flex;
		}

Comments

[退会済みユーザー]

headerにflexを試したのですが、中央揃えになるだけで、横に並んでいません...

[Lhankor_Mhy]

当方の環境では横並びになっています。

https://jsfiddle.net/Lhankor_Mhy/zub1t7f8/

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

[退会済みユーザー]

自分なりに試行錯誤した結果なんとかできるようになりました、ありがとうございました。