ヘッダーのリストを均等に揃えたい

上の画像ようなヘッダーを作りたいのですが、全体を均等に揃えるのがうまくできません。
試したこととしては、下記コードのように、ul要素にjustify-content: spacebetween;を指定したり、li要素にdisplay:inline-block;を指定したりしました。
しかし、下の画像のように、なかなか均等に揃えることができません。
わかる方おりましたら、ご教授お願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>144Lab</title>
7  <link rel="stylesheet" href="main.css">
8</head>
9
10<body>
11  <header>
12    <ul>
13      <li><img src="img/header.png"></li>
14      <li>ABOUT</li>
15      <li>NEWS</li>
16      <li>SERVICE & PRODUCT</li>
17      <li>CONTACT</li>
18    </ul>
19  </header>
20</body>
21
22</html>

css
1body {
2  width: 1280px;
3  height: 832px;
4  background-color: #F2F3F7;
5  background-image: url("menta.svg");
6  background-size: 100% auto;
7}
8
9header {
10  width: 974.5px;
11  height: 77px;
12  margin: 0 auto;
13  background-color: #FFFFFF;
14}
15
16header ul {
17  display: flex;
18  justify-content: space-between;
19}
20
21header ul li{
22    display: inline-block;
23    list-style-type: none;
24    font-size: 14px;
25    color: #000000;
26    margin: 0 auto;
27    line-height: 77px;
28}
29
30header li img {
31  margin-right: 116px;
32  padding-top: 10px;
33}

行動規範の内容に同意します

回答2件

自分なら、以下のように実装します。

「均等」というのが、何かよくわかりませんでしたが、勘で
「ABOUT、NEWS、SERVICE & PRODUCT、CONTACT」の余白を均等にしたいのだと理解しました。
(横幅を均等にすると隙間がスカスカになったりして見栄えが悪いため)

HTML
1<header>
2  <div class="logo">
3    <!-- レスポンシブを考えると、あらかじめロゴは<ul>の外に出していたほうが楽 -->
4    <a href=""><img src="img/header.png"></a>
5  </div>
6  <ul>
7    <!-- 最終的には<a>を追加するはずなので、最初に追加しておきます。 -->
8    <li><a href="">ABOUT</a></li>
9    <li><a href="">NEWS</a></li>
10    <li><a href="">SERVICE & PRODUCT</a></li>
11    <li><a href="">CONTACT</a></li>
12  </ul>
13</header>

CSS
1body {
2  width: 1280px;
3  height: 832px;
4  background-color: #f2f3f7;
5  background-image: url("menta.svg");
6  background-size: 100% auto;
7}
8
9header {
10  width: 974.5px;
11  height: 77px;
12  margin: 0 auto;
13  background-color: #ffffff;
14  display: flex;
15}
16
17/* 左側に配置するロゴ */
18header .logo {
19  display: flex;
20  align-items: center;
21  margin-right: 116px;
22}
23header logo img {
24  display: block;
25}
26
27/* 右側に配置するナビゲーション */
28header ul {
29  margin-left: auto; /* 右側に配置するための記述 */
30  display: flex;
31  /* justify-content: space-between; */
32  align-items: center;
33}
34header ul li {
35  /* display: inline-block; */
36  list-style-type: none;
37  font-size: 14px;
38  color: #000000;
39  margin: 0 auto;
40  /* line-height: 77px; */
41  line-height: 1;
42  white-space: nowrap;
43  padding: 0 40px; /* 左右の余白。好きなように調整してください。 */
44}
45
46/* 最後の<li>以外の右側に区切り線を表示 */
47header ul li:not(:last-child)::after {
48  content: "";
49  width: 1px;
50  height: 10px;
51  background: #000000;
52  margin: auto 0;
53  position: absolute;
54  top: 0;
55  bottom: 0;
56  right: 0;
57}
58
59header ul li a {
60  color: #000000;
61  text-decoration: none;
62}

投稿2020/04/19 05:07

編集2020/04/19 06:22

new1ro

総合スコア4528

19941224ngng

2020/04/19 14:04

ありがとうございます！参考にさせていただきます！

行動規範の内容に同意します

ベストアンサー

HTMLのimgを含むliにクラスを追加してCSS設定できるようにしておいて、

html
1  <header>
2    <ul>
3      <!--imgのブロックにclassを追加-->
4      <li class="imgbox"><img src="https://placehold.jp/200x50.png"></li>
5      <li>ABOUT</li>
6      <li>NEWS</li>
7      <li>SERVICE & PRODUCT</li>
8      <li>CONTACT</li>
9    </ul>
10  </header>

ulのブラウザ既定値の余白をリセットしておいて、flex で水平位置均等配置、垂直位置中央配置すれば、li要素の間隔は均等になると思います。

css
1header ul {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5  margin: 0;       /*ブラウザの既定値をリセット*/
6  padding: 0 10px; /*ブラウザの既定値をリセットして左右余白は希望値に調整*/
7  height: 100%;
8}
9
10header ul li{
11    display: inline-block;
12    list-style-type: none;
13    font-size: 14px;
14    color: #000000;
15/*    margin: 0 auto;*/
16/*    line-height: 77px;*/
17}
18header li.imgbox {
19  height: 50px; /*画像の高さに合わせる*/
20}
21header li img {
22/*  margin-right: 116px; */
23/*  padding-top: 10px; */
24}