0

我被一个让我发疯的问题困住了。我正在开发一个网站，该网站在与主导航相同的 div 中有一个框。它一直显示到右侧（栏的宽度为 100%），我需要它显示在带有主导航的 div 中（宽度为 1020px）

我正在更改 div 的结构，但它只会在 Chrome (win) 中正确显示。我还测试了 Safari (win)、Chrome (mac) 和 Safari (win)。

这是我所拥有的：

HTML

<div id="navigation" class="gb_ff clearfix">
    <div id="main_navigation" class="container hor_navigation clearfix">
        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'header', 'depth' =>'2', 'container' => 'none' ) ); ?>        
        <?php if ( !is_user_logged_in() ): ?>

        <div id="nav_subscription" class="subscription_form clearfix"> <span id="subscribe_dd" class="contrast">
            <?php gb_e( 'Get the Latest Deals' ) ?>
            </span>
        </div><!-- #main_navigation -->

        <div id="subscription_form_wrap" style="display:none;">
            <div class="optinbar_close" style="bottom: 202px; left: -10px;"></div>
            <p class="fillout2">Γράψε το όνομα και το email σου και κλίκαρε 'Στείλτε το δώρο μου'. </p>
            <!-- Begin MailChimp Signup Form -->
            <!--End mc_embed_signup-->
        </div>
    </div><!-- #header_subscription.subscription_form -->
    <?php endif ?>
</div><!-- #navigation -->

CSS

#navigation, #main_navigation li a {
    width: 100%;
    color: #999999;
}

#navigation {
    margin: 0 auto;
    padding: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-bottom: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: relative;
    z-index: 50;
    font-size: .9em;
    background: url(http://deals.karditsa.topgreekgyms.gr/wp-content/themes/gbs-merchant-dashboard/img/menu_gradient.png) repeat-x center bottom;
}

#main_navigation {
    height: auto;
    width: 1020px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

#subscription_form_wrap {
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background: none;
    background-color: #FFFFFF;
    padding: 0;
    float: left;
    position: absolute;
    top: 46px;
    right: 0;
    height: auto;
    min-width: 200px;
    border: 1px solid #CCC;
    font-size: 13px;
}

#subscribe_dd {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 31px;
    background-color: #999999;
    width: 255px;
    height: 31px;
    white-space: nowrap;
    padding: 10px 20px 5px;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px;
    position: absolute;
    top: 0;
    right: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 10;
    border-bottom: 1px solid #CCC;
    border-bottom: 1px solid rgba(255, 255, 255, .2);    
}

我正在研究 WordPress。

4

2 回答 2

1

您可能首先将“获取最新详细信息”框实际放入 id 为 的 div 中main_mavigation。现在它位于 id 为“navigation”的 div 中，并且绝对定位为 right=0，因此它显然会一直向右移动。

于 2013-01-17T21:22:45.140 回答
1

将 #main_navigation 移动到 #navigation 中，以便前者包含在后者中：

<div class="container gb_ff clearfix" id="navigation">
    <div id="main_navigation" class="hor_navigation clearfix"> ... </div>
    <ul id="menu-navigation-menu" class="menu">
        ...
    </ul>
</div><!-- #navigation -->

然后，您可以删除 right 和 top CSS 语句并更改为：

#main_navigation {position: relative; display: block;}

这可以在其他方面简化页面布局。

于 2013-01-17T21:26:12.180 回答