logoとmainMenuを横に並べたい

以下の画像のように、logoとmenuがきちんと真横に並びません。これをきちんと横に並べるにはどうしたらいいですか？(おそらく要素の幅が長すぎて縦に並んでしまっています。)

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5
6<meta charset="utf-8"/>
7<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
8<link rel="stylesheet" href="20220414.css">
9<title>header</title>
10
11</head>
12
13<body>
14
15 <!-- #header -->
16<header id="header">
17<!-- global navi -->
18<div id="gNavi">
19  <div class="gNaviBtn">
20     <input type="checkbox" id="menu-btn-check">
21     <label for="menu-btn-check" class="menu-btn"><span></span><span></span><span></span></label><!--チェックボックス-->
22     <div class="logo"><img src="img/black.png" alt="黒"/></div>
23     <ul class="mainMenu">
24       <!--<li><div class="logo"><img src="img/logo.png" alt="ゲストハウスここたまや"/></div><li>--><!--4/14 liの中に入れてしまった-->
25     　<li><div class="mini-logo"><img src="img/black.png" alt="黒"/></div></li>
26       <li><a href="/fukuske/">プラン1</a></li>
27       <li><a href="/fukuske/#itemList">プラン2</a></li>
28       <li><a href="concept.html">プラン3</a></li>
29       <li><a href="craftsmanship.html">プラン4</a></li>
30       <li><div class="top-button"><a href="history.html"><span>予約する/BOOK HERE</span></a></div></li>
31     </ul>
32  </div>
33</div>
34
35<!-- global navi -->
36</header>
37<!-- #header -->
38<!--ここでメニューを作っている-->
39
40
41</body>

CSS
1<style>
2
3.body{
4   font-family: "游ゴシック", "ヒラギノ角ゴ　ProN", "メイリオ", "MS Pゴシック", sans-serif;/*https://willcloud.jp/knowhow/font-family/#font-family*/
5   margin: 0;
6   padding: 0;
7  }
8 * {/*ブラウザのすべてのCSSをリセット*/
9  margin: 0;
10  padding: 0;
11 }
12
13#menu-btn-check {
14    display: none;
15}
16
17@media (min-width: 1025px) {/*PC版*/
18#gNavi{
19background-color: #E5E5E5; 
20}
21#gNaviBtn{
22/*display: flex;*/
23/*justify-content: space-between;*/
24display: inline-block;
25}
26/*---------------------- Global Navi Menu ------------------------*/
27/*.mainMenu{
28  display: flex;
29  justify-content: space-between;
30}*/
31ul.mainMenu {
32/*display: flex;*/
33/*align-items: center;*/
34/*justify-content: space-between;*/
35/*width: 700px;*/
36text-align: right;
37}
38ul.mainMenu li {
39display: inline-block;
40margin-top: 0px;/*この高さはdisplay-widthによって変化しないので絶対値にした*/
41margin-right: 20px;/*要素間の距離を伸ばした*/
42}
43ul.mainMenu li a {
44font-size: 14px;
45font-weight: bold;
46color: #73683b;
47text-decoration: none;
48}
49ul.mainMenu li span{
50color: white;
51background-color:#73683b;
52padding: 20px 40px;
53}
54.logo img{
55/*display: inline-block;*/
56width:300px;
57height:auto;
58margin-left: 60px;
59}
60.mini-logo img{
61display: none;
62}
63}
64
65</style>

どうぞよろしくお願いします。

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

回答2件

ベストアンサー

とりあえず

CSS
1.gNaviBtn{
2    display: flex;
3}

あとは別途考えてください。

投稿2022/04/15 02:19

itagagaki

総合スコア8402

適当

css
1body {
2  font-family: "游ゴシック", "ヒラギノ角ゴ　ProN", "メイリオ", "MS Pゴシック", sans-serif;
3  /*https://willcloud.jp/knowhow/font-family/#font-family*/
4  margin: 0;
5  padding: 0;
6}
7
8* {
9  /*ブラウザのすべてのCSSをリセット*/
10  margin: 0;
11  padding: 0;
12}
13
14#menu-btn-check {
15  display: none;
16}
17
18@media (min-width: 1025px) {
19
20  /*PC版*/
21  #gNavi {
22    background-color: #E5E5E5;
23  }
24
25  #gNaviBtn {
26    /*display: flex;*/
27    /*justify-content: space-between;*/
28    display: inline-block;
29  }
30
31  /*---------------------- Global Navi Menu ------------------------*/
32  /*.mainMenu{
33    display: flex;
34    justify-content: space-between;
35  }*/
36  ul.mainMenu {
37    float: right;
38    /*display: flex;*/
39    /*align-items: center;*/
40    /*justify-content: space-between;*/
41    /*width: 700px;*/
42    text-align: right;
43  }
44
45  ul.mainMenu {
46    height: 58px;
47    line-height: 58px;
48  }
49
50  ul.mainMenu li {
51    display: inline-block;
52    margin-top: 0px;
53    /*この高さはdisplay-widthによって変化しないので絶対値にした*/
54    margin-right: 20px;
55    /*要素間の距離を伸ばした*/
56    vertical-align: middle;
57  }
58
59  ul.mainMenu li a {
60    font-size: 14px;
61    font-weight: bold;
62    color: #73683b;
63    text-decoration: none;
64  }
65
66  ul.mainMenu li span {
67    color: white;
68    background-color: #73683b;
69    padding: 20px 40px;
70  }
71
72  .logo {
73    display: inline-block;
74    width: 300px;
75    height: auto;
76    margin-left: 60px;
77  }
78
79  .logo img {
80    /*display: inline-block;*/
81    width: 300px;
82    height: auto;
83    /* margin-left: 60px; */
84  }
85
86  .mini-logo img {
87    display: none;
88  }
89}
90

差分

diff
1  ul.mainMenu {
2+   float: right;
3    /*display: flex;*/
4    /*align-items: center;*/
5    /*justify-content: space-between;*/
6    /*width: 700px;*/
7    text-align: right;
8  }
9
10+ ul.mainMenu {
11+   height: 58px;
12+   line-height: 58px;
13+ }
14
15  ul.mainMenu li {
16    display: inline-block;
17    margin-top: 0px;
18    /*この高さはdisplay-widthによって変化しないので絶対値にした*/
19    margin-right: 20px;
20    /*要素間の距離を伸ばした*/
21+   vertical-align: middle;
22  }
23  
24+ .logo {
25+   display: inline-block;
26+   width: 300px;
27+   height: auto;
28+   margin-left: 60px;
29+ }
30  
31  .logo img {
32    /*display: inline-block;*/
33    width: 300px;
34    height: auto;
35-   margin-left: 60px;
36  }