nav バー　左右分割

目的：左右に分割したnavバーをつくる　真ん中はアイコンが配置されている

f:id:happy_teeth_ago:20210417162457p:plain

<style>
    .navbar_test {
        display: flexbox;
        position: relative;
    }

    .icon_image img {
        width: 100px;
        height: 100px;
        z-index: 200;
    }

    .icon_image {
        position: absolute;
        left: 50%;
        top: 50px;
        text-align: center;
        z-index: 100;
    }

    .nav_left {
        text-align: right;
        display: inline-block;
        float: left;
        width: 35%;
    }

    .nav_left li {
        display: inline-block;
    }

    .nav_right {
        text-align: left;
        display: inline-block;
        float: right;
        width: 35%;
    }

    .nav_right li {
        display: inline-block;
    }
</style>

<body>
    <div id="wrap">
        <header>
            <div class="navbar_test">
                <div class="icon_image">
                    <img src="./images/icon/nav_icon.jpeg" alt="">
                </div>
                <ul class="nav_left">
                    <li class="">
                        <a class="" href="#" tabindex="-1" aria-disabled="true">Blog</a>
                    </li>
                    <li class="">
                        <a class="" href="#" tabindex="-1" aria-disabled="true">Shop</a>
                    </li>
                    <li class="">
                        <a class="" href="#" tabindex="-1" aria-disabled="true">Contact</a>
                    </li>
                </ul>
                <ul class="nav_right">
                    <li class="">
                        <a class="" href="#" tabindex="-1" aria-disabled="true">Blog</a>
                    </li>
                    <li class="">
                        <a class="" href="#" tabindex="-1" aria-disabled="true">Shop</a>
                    </li>
                    <li class="">
                        <a class="" href="#" tabindex="-1" aria-disabled="true">Contact</a>
                    </li>
                </ul>

            </div>