Question

我一直试图在一堆超链接上放置一个边框顶部以将它们与标题分开（用于学校作业）但是它没有工作，我自从尝试了这个已经一个小时了。

这是#menu的CSS代码，其中包含我的超链接：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

您需要在两者之间使用solid，否则默认值没有任何内容。

border-top: 1px solid #669999;

检查初始值为：

工作代码段

＆＃13;

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

＆＃13;

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

＆＃13;

使用 来表达目的并不是一个好主意。尝试使用margin：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

的样式

应为<br-width> || <br-style> || <color>

检查border语法here

备注

 并非用于创建空格，而是在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;
}

CSS Border top无效

3 个答案: