CSS Border top不能正常工作

我一直试图在一堆超链接上放一个边框来区分它们与标题（用于学校作业），但它不起作用，我尝试了一小时以上已经。CSS Border top不能正常工作

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

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

来源

2016-05-17 nikoniko

没有指定'solid'，所以它默认为'1px的＃699 none'，这仍然是没有边界。 –

@PraveenKumar - 我不认为OP有足够的代表发布图像。 – BSMP

确实......你**必须**陈述'边界式'。 –

您需要在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>

来源

2016-05-17 14:10:39

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

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

检查border语法here

注意

 并不意味着创造的空间，而不是用在margin CSS
我缩短你的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>

来源

2016-05-17 14:10:45 dippas

您的border-top属性缺少边框样式属性。尝试以下操作。您可以在这里更多的了解：https://developer.mozilla.org/en/docs/Web/CSS/border-top

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

来源

2016-05-17 14:10:49

请不要引用W3School作为参考。谢谢.. –

刚刚发现了为什么，谢谢！ –

CSS Border top不能正常工作

回答

相关问题