如何将 flexbox 导航栏右对齐？

Question

我有一个简短的问题，因为我运行遇到了一个我无法解决的问题。我只需要在容器左侧有一个徽标，左侧有导航链接（顶部栏）。我的代码哪里出了问题？

HTML:

<header>
        <div class="container">

            <?php
            $custom_logo_id = get_theme_mod('custom_logo');
            $logo = wp_get_attachment_image_src($custom_logo_id, 'full');

            if (has_custom_logo()) {
                echo '<a href="http://website.test/" class="site-link pull-left"> <img class="site-logo" src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '"> </a>';
            } else {
                echo '<h1 class="site-logo">' . get_bloginfo('name') . '</h1>';
            }
            ?>

            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'top-menu',
                    'menu_class' => 'top-bar'
                )
            );
            ?>
        </div>

    </header>

CSS:

header .container {
    height: 20%;
    z-index: 99;
    display: flex;
    align-items: center;
}

header .container .site-logo {
    align-items: flex-start;
}

header .container .top-bar {
    list-style-type: none;
    display: flex;
    align-self: flex-end;
}

Answer 1

当有徽标图像时，它被包裹在 <a> 标签中。所以边距需要应用到 <a>。当没有徽标图像时，边距应应用于 <h1>.

尝试：


.site-link, .site-logo {
  margin-right: auto;
}

如何将 flexbox 导航栏右对齐？

How do I align flexbox navigation bar to the right?

html

css

flexbox

header

navbar