ヘッダーの中にあるロゴとbuttonを高さを並列にしてロゴを左寄せ、buttonを右寄せにして切り離したい

Question

ヘッダーの中にあるロゴとbuttonを高さを並列にしてロゴを左寄せ、buttonを右寄せにして切り離したいのですが現在のコードではロゴとbuttonがくっついた状態です。

実際はロゴはこのままの位置で良いのですがbuttonを右側に寄せて間を空けるにはどうしたら良いでしょうか？

<header>
	<ul>
		<li>
			<div class="logo">
			    <img src="image/title.png" alt="sample.com">
			</div>
		</li>

		<li>
			<div class="button">
			    <img src="image/button.png" alt="お申し込みはこちらから！">
			</div>
		</li>
	</ul>  
  <div class="clearfix"></div>


</header>

body {
	margin: 0;
}

header {
	width: 100%;
	height: 150px;
	
}

header ul li {
	list-style: none;
	float: left;
}


.logo {
	width: 400px;
	
}

.button {
	width: 400px;
	text-align: right;
	
}

Comments

[kszk311]

私の環境では、logoは左側buttonは右側に配置されています。ブラウザなどどんな環境で確認したかを教えてください。

Answer 1

floatを使用しないので<div class="clearfix"></div>は削除、
ulで括る必要もないのでheaderの中にdivが２つ並ぶように配置。
display:flex;
justify-content:space-between;
align-items:center
でheader内の要素を横並にし両端に配置、上下で中央寄せにする。
また、logoとbuttonをwidthで固定にしているようなので、
レスポンシブに対応するようにmax-widthに変更。

こちらでいかがでしょうか？

<header>
    <div class="logo">
        <img src="image/title.png" alt="sample.com">
    </div>
    <div class="button">
        <img src="image/button.png" alt="お申し込みはこちらから！">
    </div>
</header>

header {
    width: 100%;
    height: 150px;
    display:flex;
    justify-content:space-between;
    align-items:center
}

.logo , .button {
    max-width: 400px;
}

Answer 2

floatの指定に誤りがあります。ご提示のコードの場合、<li>にfloat: left;が指定されているので、<li>が全てfloat: left;なるので、離れずにくっついたようになります。

セレクタの記述を変える事で、最初と最後の<li>に指定を入れます。

header ul li {
  list-style: none;
  float: left;
}

↓

header ul li:first-child {
  list-style: none;
  float: left;
}

header ul li:last-child {
  list-style: none;
  float: right;
}

---

<li>からfloat: left;を外し、各<div>に指定しても同じ動作です。

header ul li {
  list-style: none;
}

.logo {
  width: 400px;
  float: left;
}

.button {
  width: 400px;
  text-align: right;
  float: right;
}

---

-追記-
推測ですが、text-align: right;ではブロックとなる <div class="button">は右寄せになりません。中のテキストが右寄せになるだけです。

参考：
CSSで右寄せ・左寄せ・中央寄せする