包含文本的部分與包含無序列表的部分重疊

全新的html/css用戶在這裏！我確信有一個簡單而優雅的方法可以解決這個問題，但我一直無法找到它。包含文本的部分與包含無序列表的部分重疊

我目前在我的代碼中有四個部分，後面三個看起來完全符合我對另一個預期的關係，但第二個重疊在第一個之上。我已經通過在第二部分添加了一個id來解決這個問題，它會給它一些填充，但是你會注意到，它是從頁面頂部填充的，而不是從上面的部分填充。如果我把這個填充放開，「關於我」在包含鏈接的第一部分的背景上重疊。

#firstlink { 
 
    padding: 15px 50px 0px 0px 
 
} 
 
#linkbar { 
 
     background-color: blue; 
 
     height: 15%; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
} 
 
li { 
 
    font-size: 35px; 
 
    padding: 15px 10px 0px 0px; 
 
    float: right; 
 
    display: inline; 
 
} 
 
#aboutme { 
 
    padding: 75px 0px 0px 0px; 
 
}

<section id="linkbar"> 
 
    <ul> 
 
    <li id="firstlink">link1</li> 
 
    <li>link2</li> 
 
    <li>link3</li> 
 
    </ul> 
 
</section> 
 
<section id="aboutme"> 
 
    <h1>About Me</h1> 
 
</section> 
 
<section> 
 
    <h1>My Portfolio</h1> 
 
</section> 
 
<section> 
 
    <h1>Contact Me</h1> 
 
</section>

來源

2017-07-24 Lawton Hogan

感謝你的非常快響應。我嘗試從#linkbar刪除絕對，但是如果我從#aboutme中刪除填充，它仍然與頂部部分重疊，並且如果我從#linkbar中刪除了絕對，背景顏色消失 –

似乎無法解決重疊的問題，就好像我刪除了float：right，然後從#aboutme刪除填充仍然會發生重疊，並且此外它將我的鏈接從我想要的位置移開 –

對此搗鼓一看，我認爲這是你想要的 - https://jsfiddle.net/swarn_singh/tv25eq3g/

#firstlink { 
    padding: 15px 50px 0px 0px 
} 
#linkbar { 
     background-color: blue; 
     height: 15%; 
     top: 0; 
     left: 0; 
     width: 100%; 
} 
li { 
    font-size: 35px; 
    padding: 15px 10px 0px 0px; 
    float: right; 
    display: inline; 
} 
.clear{ 
    clear: both; 
}

來源

2017-07-24 11:43:31

#firstlink { 
 
    padding: 15px 50px 0px 0px 
 
} 
 
#linkbar { 
 
     background-color: blue; 
 
     width: 100%; 
 
     height: 15%; 
 
     display: inline-block; 
 
} 
 
ul{ 
 
    list-style-type:none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    float: right; 
 
} 
 
ul li { 
 
    font-size: 35px; 
 
    padding: 15px 10px 0px 0px; 
 
    display: inline-block; 
 
} 
 
#aboutme { 
 
    padding: 75px 0px 0px 0px; 
 
}

<section id="linkbar"> 
 
    <ul> 
 
    <li id="firstlink">link1</li> 
 
    <li>link2</li> 
 
    <li>link3</li> 
 
    </ul> 
 
</section> 
 
<section id="aboutme"> 
 
    <h1>About Me</h1> 
 
</section> 
 
<section> 
 
    <h1>My Portfolio</h1> 
 
</section> 
 
<section> 
 
    <h1>Contact Me</h1> 
 
</section>

來源

2017-07-24 11:47:40

包含文本的部分與包含無序列表的部分重疊

回答

相關問題