css 如何使导航栏与徽标和标题在同一行上

ghhaqwfi  于 2023-03-14  发布在  其他
关注(0)|答案(2)|浏览(172)

I want to put them on the same line
I've tried float it didn't work

shyt4zoc

shyt4zoc1#

除非你给我看html文件,否则我不能确定是什么问题。也许可以尝试在**.site-heading**中添加以下代码行

display: flex;

如果这不起作用,请提供的html标志和导航栏都位于。

brgchamk

brgchamk2#

请使用〉display: flex;
例如,下面是header(.header-block)的HTML结构,其中包含a)徽标B)主导航c)客户端登录CTA

<header class="header-block">
    <div class="site-logo">
        
    </div><!-- / site logo -->

    <div class="navbar">
        
    </div><!-- / main nav area -->

    <div class="client-login">
        
    </div><!-- / client login -->
</header>

在CSS中,您可以添加以下代码-

.header-block {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    direction: ltr;         /* --- optional --- */
    align-items: center;    /* --- for positioning the child elements vertically center --- */
}

我希望你能得到预期的结果。
您可以在此处找到示例-〉http://wtaxtest.designshowcase.co.za

相关问题