html - 在 CSS header 问题中

Question

您好 :) 在我的 css 中，我试图将导航栏保留在 header 标签内以使样式更容易，但由于某些原因， header 链接显示在我网站其余部分顶部的 header 标签之外让我觉得它没有正确设置到标题标签中的文本？

你能帮我找出我可能结构错误的地方吗？

谢谢亚当 :)

链接到当前版本 View 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