CSSボーダートップが動作していない

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>

チェックborder構文here

ノート

•  は、スペースを作成するものではありません、私はあなたの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>

を短縮

CSSではなく marginを使用

Answer 3

border-style属性にborder-style属性がありません。以下を試してください。あなたはもっとここに見つけることができます：https://developer.mozilla.org/en/docs/Web/CSS/border-top

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