ホームページのトップページをHTML,CSSで作成しているのですが、一列に並んで欲しい文字がずれて表示されます。

Question

HTML,CSSでページを作っています。
ヘッダーの左上にロゴ、右上にログインボタンを並べたいのですが、なぜかログインボタンがずれて表示されてしまいます。

 <header>
      <div class="container">
          <div class="header-left">
            <div class="logo">漫画.com</div>
          </div>
          <div class="header-right">
              <a href="#" class="login">ログイン</a>
          </div>
      
      </div>

header{
    height:65px;
    background-color:rgba(34,49,52,0.9);
}

.logo{
    width:124px;
    margin-top:10px;
    padding-top:15px;
    color:white;
    font-size:25px;
}

.header-right{
  float:right;
  background-color:rgba(255, 255, 255, 0.3);
  transition:all 0.5s;
}

.header-right:hover{
    background-color:rgba(255,255,255,0.5)
}

.header-right a{
  line-height:65px;
  padding:0 25px;
  color:white;
  display:block;
}

と書いております。
どこがおかしいか自分ではわかりませんでした。
よろしくお願いいたします。

Answer 1

float 使うなら、下記を追加すれば横に並ぶけど、

.header-left {
  float: left;
}

float はいろいろ面倒なので、今なら、横並びは Flexを使うのが王道です。

header{
  background-color:rgba(34,49,52,0.9);
}
.container {
  height:65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo{
  width:124px;
  color:white;
  font-size:25px;
}
.header-right{
  background-color:rgba(255, 255, 255, 0.3);
  transition:all 0.5s;
  height: 100%;
}

Comments

[Googler]

回答ありがとうございます。「漫画.com」は左上に、「ログイン」はその行の右上に表示したいのですが、私のやり方だとなぜログインが少し下にずれてしまうのでしょうか？

[Googler]

すみません、解決しました！ありがとうございます！

[hatena19]

float で横並びさせる時は、横並びさせたい要素すべてにfloatを設定します。また、floatを clearで解除する必要があるなど、いろいろ複雑なことになります。

flex で横並びさせる時は、横並びさせたい要素の親要素に設定するだけでOKです。flexを使い方を学習されることをお勧めします。