CSS边框顶部不起作用 [英] CSS Border top is not working

问题描述

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

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

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

< div ID = 菜单 > < 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 之间，否则默认值没有任何内容。

  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 ：
$ b

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

b

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)

解决方案

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>

这篇关于CSS边框顶部不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！