CSS Border top無效

Question

我一直試圖在一堆超鏈接上放置一個邊界頂部以將它們與標題分開（用於學校作業），但它不起作用，我已經嘗試了一個多小時了。

這是#menu的CSS代碼，其中包含我的超鏈接：

 #menu { color: #ffffff; padding: 10px 0px 10px 0px; text-align: center; border-top: 1px #669999; } 

 <div id="menu"> <a href="#">HYPERLINK 1</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="#">HYPERLINK 2</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="#">HYPERLINK 3</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="#">HYPERLINK 4</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="#">HYPERLINK 5</a> </div> 

這是它的樣子。 （是的，我知道它很難看，但我必須按說明操作）

Answer 1

你需要在兩者之間使用solid ，否則默認值沒有任何東西。

border-top: 1px solid #669999;

檢查初始值是：

工作片段

 #menu { color: #ffffff; padding: 10px 0px 10px 0px; text-align: center; border-top: 1px solid #669999; } 

 <div id="menu"> <a href="#">HYPERLINK 1</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="#">HYPERLINK 2</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="#">HYPERLINK 3</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="#">HYPERLINK 4</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="#">HYPERLINK 5</a> </div> 

並不是一個好主意使用  用於布局目的。 嘗試使用margin ：

 #menu { color: #ffffff; padding: 10px 0px 10px 0px; text-align: center; border-top: 1px solid #669999; } #menu a { margin: 10px; } 

 <div id="menu"> <a href="#">HYPERLINK 1</a> | <a href="#">HYPERLINK 2</a> | <a href="#">HYPERLINK 3</a> | <a href="#">HYPERLINK 4</a> | <a href="#">HYPERLINK 5</a> </div> 

Answer 2

你的border語法不正確，缺少border樣式，

應該是<br-width> || <br-style> || <color> <br-width> || <br-style> || <color>

在這里檢查border語法

筆記

•   不是為了創建空格，而是在CSS中使用margin
• 我縮短了你的padding和你的六角顏色

---

 body { background: darkgreen } #menu { color: #fff; padding: 10px 0; text-align: center; border-top: 1px solid #699; } #menu a { margin: 0 5px; color:#fff } 

 <div id="menu"> <a href="#">HYPERLINK 1</a>| <a href="#">HYPERLINK 2</a>| <a href="#">HYPERLINK 3</a>| <a href="#">HYPERLINK 4</a>| <a href="#">HYPERLINK 5</a> </div> 

Answer 3

您的border-top屬性缺少border-style屬性。 請嘗試以下方法。 您可以在這里找到更多信息： https ： //developer.mozilla.org/en/docs/Web/CSS/border-top

#menu {
  ...
  border-top: 1px solid #669999;
}