ログインボタンの高さをヘッダーに合わせたい

Question

前提・実現したいこと

ログインボタンをヘッダーの高さに合わせたいです。
ログインの色をホワイトにしたいです。
の2点です。

発生している問題・エラーメッセージ

ログインボタンがヘッダーの下に来てしまいます。
![![イメージ説明](d132bb26a1007906d856988b97f5ee0f.png)](e2f16985aa6c6dd5a51a43d811f0fa38.png)

該当のソースコード

![イメージ説明](24cd223e654e8d492e791dcde0f1b6c2.png)
![イメージ説明](58a412a49a710cde16a2511f0a2118bc.png)
初めての質問でしてここまで無事に質問出来てるでしょうか。

試したこと

display:block;にしてみる
line-heightを使う
aタグにクラス名を付けて、.クラス名{}でCSSを使う

補足情報（FW/ツールのバージョンなど）

初質問でして不届きな部分があるかもしれません。
よろしければご指摘くださると幸いです。

Comments

[hatena19]

画像が表示されていません。
入力欄上部のツールバーの「画像の挿入」ボタンで画像を挿入してください。

HTMLとCSSのコードは実際のコードをコピーして貼り付けてから、選択してツールバーの<code>ボタンをクリックしてください。

[hoshi-takanori]

画像のリンクをコードにしちゃったせいで画像が表示されてませんね。画像自体は teratail のサーバーに上がってるので、以下のリンクで見ることができます。

スクリーンショット
https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d132bb26a1007906d856988b97f5ee0f.png

ソースコード
https://teratail-v2.storage.googleapis.com/uploads/contributed_images/24cd223e654e8d492e791dcde0f1b6c2.png
https://teratail-v2.storage.googleapis.com/uploads/contributed_images/58a412a49a710cde16a2511f0a2118bc.png

[hoshi-takanori]

うーん、そのコードだとそうはならないと思うけど…。もうちょっと前後のコードを見てみないとよく分かりません。質問は編集できますので、コードは画像ではなく文字でそのままコピペしてください。

Answer 1

• 全角スペースがあれば、半角スペースに置き換えてください。
• classs="..."をclass="..."に置き換えてください。
• idの先頭文字を数字にすると、CSSは認識してくれません。

あまり知られていない気がするのですが、
idやclassについて、数字を先頭文字にすることはできません。

NG: <div class="1234" id="5678">...</div>
OK: <div class="a1234" id="b5678">...</div>

/* NG */
.1234 { ... }
#5678 { ... }

/* OK */
.a1234 { ... }
#b5678 { ... }

どうしても、数字から始まるidやclassを使わなければならない..、という場合は、以下の記事のようなことを行えば使えるようです。

参考:
【備忘録】idやclassの先頭文字に数字は使えないけど、使いたいときにやること（使いたい時は、数字をエスケープする）