wordpress導航菜單，以下文本出現在同一行，可能是一個簡單的CSS問題

在我的基於WordPress的網站http://brilliantzenaudio.com，有一些文本顯示在導航菜單的右側。它應該繼續下一行。我嘗試在幾個不同的地方使用display：block屬性，但沒有運氣。wordpress導航菜單，以下文本出現在同一行，可能是一個簡單的CSS問題

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

前page.php文件是style.css中的

<?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(); ?>

相關部分：

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

來源

2013-10-24 composerMike

幾件事情導致此：

你沒有關閉div標籤<div id="info"必須<div id="info">
您的導航菜單已經浮動元素並沒有CSS樣式overflow:hidden顯示塊無所事事。

讓您的菜單CSS匹配這樣的：

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

隱藏菜單的溢出會產生一定的負面副作用，如果你不使用絕對定位你的下拉列表。所以作爲替代，你可以明確的開始與容器DIV彩車：

#container{ 
    clear: both; 
}

這會從它上面的元素同時清除左右浮動。

來源

2013-10-24 02:34:47 Chausser

添加overflow：hidden確實會強制頁面的主要部分從下一行開始，但也有一個不良的副作用，它會阻止顯示下拉菜單。任何其他想法？在使用Firebug查看頁面時，我看到「header」div似乎沒有包含導航菜單.. Firebug顯示的是「容器」div的一部分。 – composerMike

更新我的答案以提供備用解決方案。 – Chausser

作品！我還有一個問題，但它有點分開，所以我會問一個新的問題。同時，你是否有一個很好的解釋這些選項（溢出：隱藏，明確：兩者）的參考？我的意思是從最初的原則解釋。因爲他們對我來說聽起來很神祕。 – composerMike

在您的頭版.php你錯過了div的右括號。

來源

2013-10-24 02:29:50 kfrankl1

wordpress導航菜單，以下文本出現在同一行，可能是一個簡單的CSS問題

回答

相關問題