Question

我有一个Flexbox导航栏，里面有5个div。最左边的是社交媒体一个用于3个导航项目，位于中间的中间，徽标在中间，3个导航项目，在中间右侧，并且登录/注册最右侧。我几乎希望在“首页”上形成一个黑色背景，从导航栏的底部一直延伸到顶部。

当前看起来还不错，唯一的问题是我想在导航项中添加黑色背景，该背景表示用户所在的页面。我希望黑色背景能够拉伸该列表项的整个框的高度，但无法解决。

Index.html

<header class='header'>
     <div class='header__container'>
            <div class='header__soshul-media-bar'>
                <i class="fab fa-facebook-square header__soshul-media-bar--icon"></i>
                <i class="fab fa-twitter-square  header__soshul-media-bar--icon"></i>
                <i class="fab fa-youtube  header__soshul-media-bar--icon"></i>
                <i class="fab fa-instagram soshul  header__soshul-media-bar--icon"></i>
                <i class="fab fa-pinterest-square  header__soshul-media-bar--icon"></i> 
            </div>

            <nav class='header__navLeft'>
                <ul class='header__navLeft--list header__nav'>
                    <li class='header__navLeft--list--item'><a href='#' >Home</a></li>
                    <li class='header__navLeft--list--item'><a href='#' >Featured</a></li>
                    <li class='header__navLeft--list--item'><a href='#' >Sports</a> </li>
                </ul>
            </nav>

            <h1 class='header__logo'><a href='/'>Notyble</a></h1>

            <nav class='header__navRight'>
                <ul class='header__navRight--list header__nav'>
                    <li class='header__navRight--list--item'><a href='#' >Fitness</a></li>
                    <li class='header__navRight--list--item'><a href='#' >Lifestye</a></li>
                    <li class='header__navRight--list--item'><a href='#' >Gaming</a></li>
                </ul>
            </nav>

            <div class='header__userBar'>
                <div class='header__userBar--login'><a href='#' >Log In</a></div>
                <span class='header__userBar--divider'>|</span>
                <div class='header__userBar--register'><a href='/register'>Register</a></div>
            </div>

        </div>



    </div>
</header>

sass.css

.header{
display: flex;
flex-direction: column;
height: 75vh;


&__container{
    display: flex;
    justify-content: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.3);
    background-color: #fff;
    align-items: baseline;
    border-bottom: 2px solid black;

}

&__soshul-media-bar{
    flex: 1;
    text-align: center;

    &--icon{
        font-size: 1.4rem;
    }

    &--icon:not(:last-child){
        padding-right: 1rem;
    }
}

&__navLeft{
    flex: 2;


    &--list{
        list-style-type: none;
        text-align: right;
        word-spacing: 3rem;

        &--item{
            display: inline-block;
        }
    }
}

&__logo{
    flex: 1;
    text-align: center;
    padding-right: 5rem;
    padding-left: 5rem;
}



&__navRight{
    flex: 2;

    &--list{
        list-style-type: none;
        word-spacing: 3rem;


        &--item{
            display: inline-block;
        }
    }

}

&__userBar{
    flex: 1;
    display: flex;
    text-transform: uppercase;
    justify-content: center;
    font-size: 1.2rem;

    &--login{
        padding-right: 1rem;
    }

    &--register{
        padding-left: 1rem;
    }
}




&__featured-post{
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, rgba(0,0,0, .5), rgba(0,0,0, .5)), url('travel1.jpg');
    background-size: cover;
    background-position: 30% 70%;
}

}

我觉得我可能需要完全重新编码导航栏才能获得理想的效果，但是我想在这里发表文章，看看是否有人可以解决问题！

无法在Flexbox中使列表项达到导航栏的100％

0 个答案: