爲什麼我的頁腳邊框顯示兩次？

由於某種原因，當我在瀏覽器中預覽我的網頁時，我應用於頁腳的邊框顯示爲雙線。我究竟做錯了什麼？我是全新的HTML/CSS，所以它可能是一個超級簡單的東西。任何幫助，將不勝感激！爲什麼我的頁腳邊框顯示兩次？

這裏是我的HTML：

<div class="footer"> 
<footer> 
    <p class="footer">&copy; 2015 Brian Funderburke</p> 
</footer>

這是我的CSS：

.footer{ 
border-top:1px solid #000; 
margin: 0; 
padding: 0; } 

.footer p { 
margin: 10px; 
padding: 0px;}

2015-10-21 bfunphoto

因爲**。footer **類您調用兩次。 – SHAZ

哇，所以我完全沮喪。感謝您幫助我們，我不能相信那是多麼明顯的那個 – bfunphoto

@SHAZ無名英雄我的朋友！ – Chris

您已經應用到<p>的.footer類，所以它有一個邊界，以及：

<div class="footer"> 
<footer> 
    <p>&copy; 2015 Brian Funderburke</p> 
</footer> 
</div>

參考這個驚人的圖形表示形象化發生了什麼：
既然你應用類.footer到<p>，以及它的父，他們都有一個邊界，使得雙邊框的效果：

.footer{ 
    border-top:1px solid #000; 
    margin: 0; 
    padding: 0; 
}

你應該從<p>刪除footer類，並解決問題。

2015-10-21 13:30:28

因爲您有兩個使用的.footers類。刪除div類的頁腳。

<footer class="footer"> 
    ... 
</footer>

這應該夠了。

2015-10-21 13:30:32 Chris

謝謝！問題解決了。不能相信這是多麼簡單。 – bfunphoto

向上讚揚！ :) @bfunphoto – Chris

我個人會接受雅各布格雷的答案作爲解決方案。他使用了一個清晰的解釋來幫助未來的用戶。 :) – Chris

它顯示了兩次，因爲你有兩個元素與.footer相同的類。

您的.footer類具有邊框樣式，並且您已將該類應用於<div>和<p>。

從其中一個元素中刪除.footer，或者執行以下操作來簡化選擇和標記。

footer { 
    border-top:1px solid #000; 
    margin: 0; 
    padding: 0; 
} 
footer p { 
    margin: 10px; 
    padding: 0; 
}

<footer> 
    <p>&copy; 2015 Brian Funderburke</p> 
</footer>

2015-10-21 13:30:38 hungerstar

因爲你使用的是同一類.footer兩次

2015-10-21 13:30:44

2015-10-21 13:32:01

回答