0

私は私を夢中にさせる問題で立ち往生しています。メインナビゲーションと同じdivにボックスがあるWebサイトで作業しています。右端まで表示され（バーの幅は100％）、メインナビゲーション（幅1020px）でdivに表示する必要があります

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

#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 -->

次に、右側と上部のCSSステートメントを削除して、次のように変更できます。

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

これにより、他の点でページレイアウトが簡素化される可能性があります。

于 2013-01-17T21:26:12.180 に答える
1

あなたは実際に「最新の詳細を取得」ボックスをidのidでdivの中に置くことから始めるかもしれませんmain_mavigation。現在、idが "navigation"のdivにあり、right = 0で絶対に配置されているため、明らかに右端まで移動します。

于 2013-01-17T21:22:45.140 に答える