CSS Border top is not working

问题:

I've been trying to put a border top on a bunch of hyperlinks to separate them from the title (for a school homework) but it's not working and I'm trying this since over an hour already.

This is the CSS code of the #menu which contains my hyperlinks:

#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>

This is the picture how it looks like. (Yes I know it's ugly, but I have to work with the instructions)

回答1:

You need to use solid in between, else the default value doesn't have anything.

border-top: 1px solid #669999;

Check the initial values to be:

Working Snippet

#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>

And not a good idea to use   for laying out purposes. Try using 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>

回答2:

your border syntax is incorrect, is missing the style of border,

should be <br-width> || <br-style> || <color>

Check border syntax here

Notes

•   isn't meant to create spaces, use instead margin in CSS
• I shortened your padding and your hex colors

---

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>

回答3:

Your border-top is property is missing the border-style attribute. Try the following. You can find out more here: https://developer.mozilla.org/en/docs/Web/CSS/border-top

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