Question

我正在尝试获取我的徽标，以便与菜单保持一致。

示例：

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

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

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

以下是该网站的链接：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 -->

Style.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;
}

徽标对齐：

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

我不是CSS专家，最好是一个完整的菜鸟。我尝试添加左：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;

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

Answer 2

尝试将徽标和菜单放在同一个div或甚至标签中，然后对其应用左边距。我不完全了解您的页面是如何构建的

强制徽标与菜单保持一致

2 个答案: