HPを作成していますが、適切な配置に設定することができません。

ホームページ制作初心者です。
下記のコードのようにブラウザに反映させると、ロゴを設定する予定の一番上の左が空白になる予定です。
そのため、その下部にグローバルナビを設定したいのですが、最上部の空白のところにグローバルナビがきてしまいます。

つまり下記のコードで反映されたものとグローバルナビがともにさ横並びになってしまいます。
どのようにしたら下記のコードに反映されたその下部にグローバルナビを設定することができるでしょうか？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Miyu</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>

    <ul>
    <li><input type="text" name="name" size="25"></li>
    <li><button>検索</button></li>
    <li>マイページ</li>
    <li>ログイン</li>
    <li>ユーザー登録</li>
    </ul>
    

  </body>
</html>

ul {
    float: right;
}



li {
    list-style: none;
    float: left;
    margin-right: 12px;
}

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

回答1件

ベストアンサー

イメージとしては、こんな感じでしょうか？
ヘッダーのロゴを左上に入れ、その下にグローバルナビを入れたいということでしょうか？

HTML
1<!DOCTYPE>
2<html>
3  <head>
4	<meta charset="UTF-8">
5	<title>Miyu</title>
6	<link rel="stylesheet" type="text/css" href="style6.css" />
7</head>
8
9<body>
10	<header>
11		<div id="imgarea">　<!--画像領域作成-->
12			<img src=" ">
13		</div>
14		<div id="gNav">
15			<ul>
16				<li><input type="text" name="name" size="25"></li>
17				<li><button>検索</button></li>
18				<li>マイページ</li>
19				<li>ログイン</li>
20				<li>ユーザー登録</li>
21			</ul>
22		</div>
23	</header>
24</body>
25</html>

CSS
1header {
2	width: 960px;
3	border: solid 1px;
4}
5
6
7/*画像領域指定*/
8#imgarea{
9	width: 100px;
10	height: 100px;
11	border: solid 1px;
12}
13
14ul {
15	display: flex;
16
17}
18
19li {
20	list-style: none;
21	padding-right: 12px;
22
23}
24