在我基于 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;
}
最佳答案
有几件事导致了这个:
- 您没有关闭 div 标签
<div id="info"需要是<div id="info"> - 您的导航菜单有 float 元素且没有 css 样式
overflow:hidden显示 block 什么都不做。
使您的菜单 CSS 与此匹配:
#navDiv{
display: block;
overflow: hidden;
}
如果您不对下拉菜单使用绝对定位，则隐藏菜单的溢出可能会产生一些负面影响。因此，作为替代方案，您可以清除以容器 div 开头的 float :
#container{
clear: both;
}
这将清除其上方元素的左右浮动。
关于css - wordpress 导航菜单，以下文本出现在同一行，可能是一个简单的 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19555777/