Question

在我基于WordPress的网站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;
}

Answer 1

有几件事正在造成这种情况：

您没有关闭div标签<div id="info"需要<div id="info">
您的导航菜单已浮动元素且没有css样式overflow:hidden显示块无效。

让您的菜单css与此匹配：

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

如果您没有对下拉列表使用绝对定位，则隐藏菜单溢出会产生一些负面影响。因此，作为替代方案，您可以从容器div开始清除浮动：

#container{
    clear: both;
}

这将清除其上方元素的左右浮动。

Answer 2

在你的front-page.php中，你错过了div的结束括号。

wordpress导航菜单，下面的文字出现在同一行，可能是一个简单的CSS问题

2 个答案: