横並び、等間隔、下揃えのリストを作り中央にロゴを配置したい

前提・実現したいこと

・横並びのリスト
・中央に<h1>で囲んだサイトロゴを配置
・メニューは下揃えで等間隔に配置

○で囲んでいる部分は同じ間隔
WELCOME(サイトロゴ)を画面の中央

発生している問題

<h1>の部分をposition: absolute;で中央に設置しています。メニューを等間隔、下揃えにできません。

該当のソースコード

HTML
1<main>
2<header>
3
4  <h1 class="logo">
5    <a href="#"><img src="http://fast-uploader.com/transfer/7095941757581.png"></a>
6  </h1>
7
8  <nav>
9    <ul class="clearfix">
10      <li>
11        <a href="#">メニュー</a>
12      </li>
13      <li>
14        <a href="#">メニュー</a>
15      </li>
16      <li>
17        <a href="#">メニュー</a>
18      </li>
19      <li>
20        <a href="#">メニュー</a>
21      </li>
22    </ul>
23  </nav>
24
25</header>
26</main>

CSS
1header{
2    margin:100px auto 59px;
3    position: relative;
4}
5header nav{
6    position: relative;
7    overflow: hidden;
8}
9header nav ul{
10    position: relative;
11    left: 50%;
12    float: left;
13}
14header nav ul li{
15    position: relative;
16    left: -50%;
17    float: left;
18    margin-right: 50px;
19}
20header nav ul li:nth-child(2){
21    margin-right: 500px;
22}
23header nav ul li a:link,
24header nav ul li a:visited{
25    font-size: 16px;
26    letter-spacing: 0.05em;
27}
28main .logo{
29    position: absolute;
30    top:0;
31    bottom: 0;
32    left:0;
33    right: 0;
34    margin: auto;
35    width:500px;
36    height:　315px;
37}

試したこと

header nav ul li:nth-child(2){
margin-right: 400px;
}
の調整

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

回答3件

ちょっとトリッキーだけど ul の中に無理やり幅500pxの空要素追加して
orderをかえて中央にはさんでから flex-between で等間隔にするのはどうかな

h1 {
  position:  absolute;
  width:  100%;
  height:  100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
nav {
  width:  100%;
  height:  100%;
}
ul {
  width:  100%;
  height:  100%;
  margin: 0;
  padding:  0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
li:nth-child(3) {
  order:  4;
}
li:nth-child(4) {
  order:  5;
}
ul:after {
  display: block;
  content:  "";
  width:  500px;
  order:  2;
}

投稿2018/10/24 15:23

退会済みユーザー

総合スコア0

このような感じでいかがでしょうか？
・下揃え対策の為のリセット用ｃｓｓがあります
・不要なｃｓｓは削除してください

css
1* {  /* リセット用ｃｓｓです */
2  margin: 0;
3  padding: 0;
4}
5
6.flexbox {
7  width: 960px;  /* 不要ならば削除してください */
8  margin: 0 auto;  /* 不要ならば削除してください */
9  display: flex;
10  justify-content: center;  /* 中央寄せ */
11  align-items: flex-end;  /* 下揃え */
12}
13
14img {
15  vertical-align: bottom;  /* 下余白対策 */
16}
17
18li {
19  display: inline-block;
20  list-style: none;
21}
22
23.navlist-1 li {
24  padding-right: 20px;
25}
26
27.navlist-1 li {
28  padding-left: 20px;
29}
30
31li a {
32  text-decoration: none;  /* 不要ならば削除してください */
33  color: #000;  /* 不要ならば削除してください */
34}
35

HTML
1<main>
2<header>
3<div class="flexbox">
4<nav>
5<ul class="navlist-1">
6<li>
7<a href="#">メニュー</a>
8</li>
9<li>
10<a href="#">メニュー</a>
11</li>
12</ul>
13</nav>
14<h1 class="logo">
15<a href="#"><img src="http://fast-uploader.com/transfer/7095941757581.png"></a>
16</h1>
17<nav>
18<ul class="navlist-1">
19<li>
20<a href="#">メニュー</a>
21</li>
22<li>
23<a href="#">メニュー</a>
24</li>
25</ul>
26</nav>
27</div>
28</header>
29</main>