teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

テキスト追加

2020/06/11 03:09

投稿

imada4991
imada4991

スコア15

answer CHANGED
@@ -1,4 +1,20 @@
1
1
  一応自分なりにコードを修正させていただきました。
2
+ 大まかに言えば
3
+
4
+ 既存のコードを見る限りログイン項目が「header-list」の<div>の中に記述されていますので
5
+ ログイン項目を独立させます。
6
+
7
+ そして
8
+ 左のロゴをfloat:left;
9
+ 右のログイン項目をfloat:right;
10
+ で飛ばします。
11
+ floatを使う際はclearfixという自分が記述したclassをお使いください。
12
+ このclassはfloatの回り込みを防いでくれます。
13
+ 使う際はfloatを指定している親要素にお使いください。
14
+
15
+ 最後に中のナビ要素をpositionで真ん中に持ってくるという流れです。
16
+ わからないことがあれば御質問いただけたらと思います。
17
+
2
18
  ```html
3
19
  <header>
4
20
  <div class="container clearfix">