ヘッダーの左にロゴ、右に横並びのリストを並べたい

現在のコードではロゴの文字が左寄り、一段落下げてボタン①と②が縦並びで右寄せという状況です。

floatやabsoluteを用いたりinline-blockにしてみたりと試したのですが、liが横並びになっても位置がロゴの文字の高さより下のままで並ばなかったり、高さが上に来てもliが縦のまま＆ヘッダーの背景が切れたりしてうまくいきません。
横並びにしたい要素(btn)があるグループの大元のクラス(header-list)に対してfloatで寄せればいいという解釈でいましたがどこに問題がありますか？

HTML
1<div class="header-logo"><h3>ロゴの文字</h3></div>
2            <div class="header-list">
3            	<ul>
4                    <li class="btn list-one"><a href="#">ボタン①</a></li>
5                    <li class="btn list-two"><a href="#">ボタン②</a></li>
6                </ul>
7            </div>

CSS
1
2* {
3	margin: 0;
4	padding: 0;
5	box-sizing: border-box;	
6}
7
8.header-logo {
9	height: 65px;
10	background-color: #0B3861;
11	background-color: rgba(0,176,227,0.5);
12}
13
14.header-list {
15	float: right;	
16}
17

回答1件

ベストアンサー

横並びといえば以前はfloatを使用することが多かったですが、最近ではflexboxでの実装も増えてきています。
以下のコードではいかがでしょうか？

HTML
1<div class="header">
2  <div class="header-logo"><h3>ロゴの文字</h3></div>
3  <div class="header-list">
4    <ul>
5      <li class="btn list-one"><a href="#">ボタン①</a></li>
6      <li class="btn list-two"><a href="#">ボタン②</a></li>
7    </ul>
8  </div>
9</div>

CSS
1* {
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;    
5}
6
7.header {
8  height: 65px ;
9  display: flex;
10  justify-content: space-between;
11  align-items: center;
12  background-color: #0B3861;
13  background-color: rgba(0,176,227,0.5);
14}
15
16.header ul {
17  display: flex;
18}
19.header ul li {
20  margin-left: 15px;
21  list-style: none;
22  padding-right: 15px;
23}
24
25.header-logo {
26 padding-left: 15px;
27}

質問内容に記載されていたコードを参考しました。
codepenで動作確認済みです。

投稿2019/04/17 10:01

otamunote

総合スコア281

回答へのコメント

usm

2019/04/17 12:27

ご回答ありがとうございます。早速試してみたのですが、リストが縦になってしまい位置も一段落下がって表示されてしまいました…。ちなみにですが、header-logoにfloat: left;を指定するとできました。 floatは試したと思っていたのですが、色々といじりすぎていて見落としてしまっていたのかもしれません。大変失礼いたしました。また、flexboxでの実装が増えているとのことでしたので調べて活用していきたいと思います。貴重な情報ありがとうございました。