css - 强制 Logo 与菜单保持一致

Question

我正在尝试让我的 Logo 与菜单保持一致。

例子:

_________________|<Edge of logo------|____________________________________
_________________|<Edge of Menu ---------------------------|_______________

无论页面大小如何，两条边都应对齐。

目前，当页面调整大小时，元素会分开并独立移动。

这是该站点的链接:goo.gl/46yUrt

如果您需要任何其他信息，请告诉我。

[编辑 1]

header.php 代码:(不确定这是否与独立对齐有关，但无论如何我都包含了它)

            <div id="navbar" class="navbar">
<div class="logo-align">
                <a href="http://level42.ca/village"><img src="http://level42.ca/village/wp-content/uploads/2014/05/logo.png" width="370" height="61" alt="© FDC Designs"></a><P></P>
            </div>
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->

样式.css代码:

/**
 * 4.2 Navigation
 * ----------------------------------------------------------------------------
 */

.main-navigation {
    clear: both;
    margin: auto;
    max-width: 1028px;
    min-height: 35px;
    position: relative;
    /*float:right;
    Padding: 0 300px;*/
    z-index: 1;
    top: 30px;
    Background: #141412;
}

Logo 对齐方式:

.site-header .logo-align {
     padding: 30px 0px 0px 0px;
     position: relative;
     left: 20%;
}

我不是 CSS 专家，充其量只是个菜鸟。我试过添加 left: 25%，这似乎有效，但前提是我不更改页面大小。我试过 Padding、Positing 和 float 命令，但我似乎无法正确排列它们。

如果您需要更多信息，请告诉我。

Answer 1

在 Mariano Urbonas 的帮助下，而不是像这样的代码:

<div class="logo-align">
          Logo
</div>
<div id="navbar" class="navbar">
     <nav id="site-navigation" class="navigation main-navigation" role="navigation">
          Nav Bar
     </nav><!-- #site-navigation -->
</div>

并试图单独对齐每个元素，我更改了 header.php 代码如下:将两个元素添加到 1 个 div。

<div id="navbar" class="navbar">
     <div class="logo-align">
          Logo
     </div>
     <nav id="site-navigation" class="navigation main-navigation" role="navigation">
          Nav Bar
     </nav><!-- #site-navigation -->
</div>

在这样做的过程中，我能够将其添加到 <div id="navbar" class="navbar">并且它似乎可以在任何尺寸下正确对齐它们。

background-color: #ffffff;
margin: auto;
max-width: 1028px;
width: 100%;

我还被要求删除我之前编写的独立对齐代码。

来自 <div class"logo-align">

 left: 20%;

来自 <nav id="site-navigation" class="navigation main-navigation" role="navigation">

 margin: auto;
 position: relative;

在进行这些更改时，它似乎按照我的预期工作。