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