【css】div内の要素を横並びにしたい

メデイアクエリにし912pxまで画面を広げると、nav(#menu)が展開するようにしています。(レスポンシブ)
ただし、展開したnav(#menu)の上部に謎の空白があり、どうしてもその謎の空白が除去できず綺麗に横並びにできません。デベロッパーツールで確認しても、何も表示されません。
考えるに、同じdiv内にある別floatが邪魔しているんじゃないかと思いますが、Clearなどを入れても改善されません。

つまり、#open_searchと、#logoと、menuを綺麗に横並びにしたい　という事になります。

分かるかたご教授お願いします<m(__)m>

html
1<html lang="ja">
2<head>
3  <meta charset="utf-8">
4  <title>###</title>
5  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
6  <link rel="stylesheet" href="css/sp_style.css">
7  <meta name="viewport" content="width=device-width,initial-scale=1">
8  <mmeta name="description" content="###"
9</head>
10<body>
11  <header>
12    <div class="container">
13      <i id="open_search" class="fas fa-search"></i>
14      <nav id="search_menu">
15        <i id="close_search" class="fas fa-times"></i>
16          <form id="search_box" action="" target="_top" accept-charset="euc-jp">
17            <input type="hidden" name="sv" value="6">
18            <input type="hidden" name="sid" value="">
19            <input type="hidden" name="su" value="">
20            <input type="hidden" name="sn" value="">
21            <input type="text" name="sitem" class="formtext" placeholder="キーワードを入力" required>
22            <input type="hidden" name="f" value="A">
23          </form>
24          <section id="keyword">
25            <h1>人気のキーワード</h1>
26          </section>
27        </nav>
28
29        <a href="sp_index.html">
30          <img class="logo" src="https://www.rakuten.ne.jp/gold/albumec/img/logo.png" width="120"height="20">
31        </a>
32
33        <i id="open_menu" class="fas fa-bars"></i>
34      <nav id="menu">
35        <i id="close_menu" class="fas fa-times"></i>
36        <ul>
37          <li><a href="sp_index.html">てすと</a></li>
38          <li><a href="#">てすと</a></li>
39          <li><a href="#">てすと</a></li>
40          <li><a href="">てすと</a></li>
41        </ul>
42      </nav>
43    </div>
44  </header>
45
46

css
1/* small screens */
2body {
3  background: #fff;
4  font-size: 14px;
5  font-family: "Lato", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", Meiryo, \30e1\30a4\30ea\30aa, "MS PGothic", sans-serif;
6  margin: 0;
7  color: #333;
8}
9
10a{
11  text-decoration:none;
12}
13
14p {
15  line-height: 2;
16  font-size: 120%;
17  text-decoration:none;
18}
19
20.logo {
21  padding-top: 2px;
22}
23.logo_2 {
24  margin-top: 40px;
25  margin-bottom: 20px;
26}
27
28.container {
29  text-align: center;
30  padding-top: 20px;
31  padding-bottom: 15px;
32  width: 90%;
33  margin: 0 auto;
34}
35
36body > section {
37  padding: 60px 0;
38}
39
40body > section:nth-of-type(odd) {
41  background: #fff;
42}
43
44/* カテゴリメニュー */
45#open_menu {
46  float: right;
47  font-size: 24px;
48  cursor: pointer;
49}
50#close_menu {
51  font-size: 22px;
52  padding: 30px;
53  padding: 15px;
54  float: right;
55  cursor: pointer;
56}
57
58#menu {
59  position: absolute;
60  height: 100%;
61  top: 0;
62  left: 0;
63  right: 0;
64  background: rgba(0, 0, 0, .8);
65  color: #fff;
66  display: none;
67}
68#menu.shown {
69  display: block;
70}
71
72#menu ul {
73  list-style: none;
74  margin: 0;
75  padding: 10px 10px;
76}
77
78#menu li {
79  clear: both;
80  line-height: 2;
81  text-align: center;
82}
83
84#menu a {
85  text-decoration: none;
86  color: inherit;
87}
88/* ここまで */
89
90
91/* サーチ */
92#open_search {
93  float: left ;
94  font-size: 22px;
95  cursor: pointer;
96  padding-top: 2px;
97}
98
99#close_search {
100  font-size: 22px;
101  padding: 15px;
102  float: right;
103  cursor: pointer;
104}
105
106#search_menu {
107  height: 100%;
108  position: absolute;
109  top: 0;
110  left: 0;
111  right: 0;
112  background: rgba(0, 0, 0, .8);
113  color: #fff;
114  display: none;
115}
116
117#search_menu.shown {
118  display: block;
119}
120
121#search_menu a {
122  text-decoration: none;
123  color: inherit;
124}
125
126
127/* large screens */
128
129@media (min-width: 912px) {
130  .container {
131    width: 820px;
132  }
133  h1{
134  font-size: 210%;
135  }
136  h4{
137    font-size: 120%;
138  }
139  .concept {
140    font-size: 120%;
141  }
142  #open_menu {
143    display: none;
144  }
145  #close_menu {
146    display: none;
147  }
148  #menu {
149    position: static;
150    display: block;
151    background: transparent;
152    color: #333;
153  }
154  #menu ul {
155    top: 0 !important;
156    padding: 0;
157    float: right;
158  }
159  #menu li {
160    display: inline-block;
161    width: 50px;
162    font-size: 10px;
163    padding-left: 10px;
164    padding-right: 10px;
165  }
166  .kerastase{
167    clear: both;
168    text-align: center;
169  }
170}
171
172

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

回答1件

ベストアンサー

nav要素に対してもfloatプロパティを指定することで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

CSS
1#menu {
2    position: static;
3    display: block;
4    background: transparent;
5    color: #333;
6    float: right; /* 追記 */
7}

投稿2019/04/05 03:25

編集2019/04/05 03:27

s8_chu

総合スコア14731

E_k

2019/04/05 03:29

早速ありがとうございます！本当にありがとうございます。勉強になりました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

【css】div内の要素を横並びにしたい

関連した質問