在CSS标题问题

Question

嗨:)在我的CSS我试图保持标题内的导航栏标签，使样式更容易，但由于某种原因，标题链接显示在标题的顶部以外的标题标记我的网站其余部分的文本，这让我觉得它没有正确设置到标题标签？

你能帮我弄清楚我可能会构成错误吗？

感谢亚当:)

链接到当前版本视图 http://jsfiddle.net/Binnsey/jadd06qm/

HTML

<header class="MainHeader"> 
    <img src="images/greenenergy.jpg" alt="Green energy logo" width="25%" height="25%" class="logo"/> 
    <h1 class="headertext"> My Green Energy</h1> 
    <nav> 
    <label for="show-menu" class="show-menu">Show Menu</label> 
    <input type="checkbox" id="show-menu" role="button"> 
     <ul id="menu"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">My Metre</a></li> 
      <li><a href="#">Customer Help</a></li> 
      <li><a href="#">Social Media</a></li> 
     </ul> 
</nav> 
</header> 

CSS3

body{ 
    margin: 0 auto; 
    width: 70%; 
    clear: both; 
    height: 100%; 
    background-color: #DCDCDC; 
    padding-top: 30px ; 
    margin: 0 auto; 
    padding-top: 30px ; 
    font-family: 'PT Sans', sans-serif; 
    font-size: 100%; 
    text-align: left; 
    line-height: 1.5; 
    padding:8px; 
    border-radius: 10px; 
    box-shadow: #0AF73A 0px 0px 50px; 
    margin-bottom:8px;} 

header { 
    margin-top: 2% 0; 
    background-color: #71B315; 
    padding-bottom: 60px;} 

.MainHeader img { 
    width: 20%; 
    height: auto;} 

.MainHeader { 
    padding-top: 20px ;} 

.logo { 
    display: inline; 
    vertical-align:middle} 

#menu .MainHeader nav a:hover, .MainHeader nav a:active 
#menu .MainHeader nav .active a:link, .Mainheader nav .active a:visited { 
    text-shadow: none;} 

#menu .MainHeader nav { 
    border-radius: 5px; 
    -webkit-border-radius: 5px;} 

.MainFooter { 
    background-color:#3D3D3D; 
    color:black; 
    clear:both; 
    text-align:center; 
    padding-bottom:10px; 
    padding-top:10px} 

.headertext { 
    display: inline;} 

.MainFooter a { 
    color: #FFFFFF; 
    text-decoration: none;} 

#headertext header {font-size:50%;} 

#menu nav li{display:inline-block;} 

/*Strip the ul of padding and list styling*/ 
#menu ul { 
    list-style-type:none; 
    margin:0 auto; 
    padding:0; 
    position: absolute;} 

/*Create a horizontal list with spacing*/ 
#menu li { 
    display:inline-block; 
    float: left; 
    margin-right: 1px; 
    padding: 5px 0px;} 

/*Style for menu links*/ 
#menu li a { 
    display:block; 
    min-width:140px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #fff; 
    background: #2f3036; 
    text-decoration: none; 
} 

/*Hover state for top level links*/ 
#menu li:hover a { 
    background: #19c589;} 

/*Hover state for dropdown links*/ 
#menu li:hover ul a:hover { 
    background: #19c589; 
    color: #fff;} 

/*Prevent text wrapping*/ 
#menu li ul li a { 
    width: auto; 
    min-width: 100px; 
    padding: 0 20px;} 

Answer 1

应用一个clearfix您header元素也像它会达到你的要求。

/* clearfix */ 
.clearfix:after { 
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

CodePen链接：http://codepen.io/ryanburnette/pen/bc6a625d46feae7904e86cb7c70b7a56

Answer 2

注释掉浮动：在#menu黎族风情左线如下图所示float类型的

#menu li { 
    display:inline-block; 
    /*float: left;*/ 
    margin-right: 1px; 
    padding: 5px 0px; 
} 

元素进不来的文档流，因此不会被包含在父容器，除非父容器的高度等于子元素的高度。在这种情况下#menu li是一个浮动元素，从而流出<header>

小提琴环线：http://jsfiddle.net/8d9bq57L/