CSS边框顶部不起作用答案

【问题标题】：CSS Border top is not workingCSS边框顶部不起作用
【发布时间】：2016-05-17 14:07:30
【问题描述】：

我一直试图在一堆超链接上加一个边框，以将它们与标题分开（用于学校作业），但它不起作用，我已经尝试了一个多小时。

这是包含我的超链接的#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>

这是图片的样子。（是的，我知道它很难看，但我必须按照说明进行操作）

【问题讨论】：

您没有指定solid，所以默认为1px #699 none，仍然没有边框。
@PraveenKumar - 我认为 OP 没有足够的代表来发布图片。
确实……您必须声明border-style。

标签： html css border

【解决方案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>

使用&nbsp; 进行布局并不是一个好主意。尝试使用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】：

您的border 语法不正确，缺少border 的样式，

应该是<br-width> || <br-style> || <color>

检查border语法here

备注

&nbsp; 不是用来创建空格的，而是在 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>

【讨论】：

【解决方案3】：

您的border-top is 属性缺少border-style 属性。试试下面的。你可以在这里找到更多信息：https://developer.mozilla.org/en/docs/Web/CSS/border-top

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

【讨论】：