0

私の WordPress ベースの Web サイトhttp://brilliantzenaudio.comでは、ナビゲーション メニューの右側にいくつかのテキストが表示されます。次の行に進むはずです。いくつかの異なる場所で display:block プロパティを使用しようとしましたが、うまくいきませんでした。

header.php の関連部分:

<body <?php body_class(); ?>>
   <div id="wrapper" class="hfeed">
      <header id="header" role="banner">
         <img src="<?php get_template_directory()?>/assets/img/brav-banner-3.jpg">
         <nav id="menu" role="navigation">
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
         </nav>
      </header>
   <div id="container">

front-page.php は

<?php get_header(); ?>
<section id="content" role="main">
  <div id="info"
       <h4>In the Los Angeles area? </h4> <p>Ask about free demo loaners! </p>
       <h4>We also take mail orders.</h4> On all orders, there is a 30-day return policy!</p> 
  </div>
  <div id="longSlogan">
       <img class="frontpageimg" src="<?php get_template_directory(); ?>/assets/img/slogan-2.jpg">

  </div>
  <div id="bunchOfPictures">

       <img src = "<?php get_template_directory(); ?>/assets/img/cables-ers-absorber-700.jpg"/></a>
       <img src = "<?php get_template_directory(); ?>/assets/img/blueprint-silencers-v2-700.jpg"/></a>
       <img src = "<?php get_template_directory(); ?>/assets/img/brav-front-page-700.jpg"/></a>

        <a href="contact" class="btn btn-lg btn-orange">Contact Us</a>
   </div>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

style.css の関連部分:

#header {
  margin-left: auto;
  margin-right: auto;
  width:90%;
}

body {
  background: #ffffff;
}

.content {
  margin: auto;
  width:90%;
  background: #ffffff;
}

#longSlogan {
  margin-left: 20px;
}

#menu {
  display:block;
  width: 900px;
  background: #222222;
}
4

2 に答える 2

1

これにはいくつかの原因があります。

  1. <div id="info"必要なdivタグを閉じませんでした<div id="info">
  2. ナビゲーション メニューにはフローティング要素があり、css スタイルのoverflow:hidden表示ブロックがないと何もしません。

メニューの CSS をこれと一致させます。

#navDiv{
   display: block;
   overflow: hidden;
}

ドロップダウンに絶対配置を使用していない場合、メニューのオーバーフローを非表示にすると、いくつかの悪影響が生じる可能性があります。別の方法として、コンテナー div から始まるフロートをクリアできます。

#container{
    clear: both;
}

これにより、その上の要素から左右の両方のフロートがクリアされます。

于 2013-10-24T02:34:47.580 に答える