爲什麼我的無序列表出現在標題之外？

-2

As far as I can tell my CSS is fine, but it just keeps appearing below the header. Any ideas? Sorry for the newb question.爲什麼我的無序列表出現在標題之外？

body { 
 
    font: 15px/1.5 Arial, Helvetica, sans-serif; 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #f4f4f4; 
 
} 
 

 

 
/* Global */ 
 

 
.container { 
 
    width: 80%; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
/* Header **/ 
 

 
header { 
 
    background: #35424a; 
 
    color: #ffffff; 
 
    padding-top: 30px; 
 
    min-height: 70px; 
 
    border-bottom: #e8491d 3px solid; 
 
} 
 

 
header a { 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 16px; 
 
} 
 

 
header li { 
 
    float: left; 
 
    display: inline; 
 
    padding: 0 20px 0 20px; 
 
} 
 

 
header #branding { 
 
    float: left; 
 
} 
 

 
header #branding h1 { 
 
    margin: 0; 
 
} 
 

 
header nav { 
 
    float: right; 
 
    margin-top: 10px; 
 
} 
 

 
header .highlight, header .current a { 
 
    color: #e8491d; 
 
    font-weight: bold; 
 
}

<header> 
 
    <div class "container"> 
 
    <div id "branding"> 
 
     <h1><span>Acme</span> Web Design</h1> 
 
    </div> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="services.html">Services</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>

所以我纔出問題的HTML或CSS，或兩者兼而有之？我只是不能爲我的生活找出爲什麼它不會在頭上，這實際上讓我瘋狂。

來源

2017-10-11 rc car

請，[代碼不發表圖片]（HTTPS：/ /meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-on-so-when-asking-a-question）。請直接在問題中以文本形式複製[相關代碼]（https://stackoverflow.com/help/mcve）。 – litelite

對不起，我是新來的。 –

是的，使用codepen/jsfiddle並只粘貼相關的代碼，然後請與我們分享。 –

這是因爲你的頭段H1元素是display:block這將需要其母公司的整個寬度嘗試添加這對你的CSS代碼：

header h1 
{ 
    display:inline-block; 
    float:left 
}

來源

2017-10-11 19:30:04

是的，謝謝你的工作。 –

爲什麼我的無序列表出現在標題之外？

回答

相關問題