CSS 边框未出现 [英] CSS borders not appearing

问题描述

我正在尝试设计我的导航菜单设计以反映 timeanddate.com 上的设计，如下图所示:

I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:

为了创建颜色，他们在 CSS 中使用了简单的底部和左侧边框.

To create the colors, they're using a simple bottom and left border in CSS.

我正在尝试为我的网站沙箱中的

标签添加边框，http://www.escapetech.com:8080.

I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.

我正在使用以下 CSS:

I'm using the following CSS:

.anylinkcss li {
  list-style-type: none;
}

.participate li {
  list-style-type: square;
  border-left-color: #fa514d;
}

#navigation_bar {
  height: 31px;
  list-style: none;
  width: 1000px;
  margin-top: 15px;
}

#navigation_bar li {
  float: left;
  padding-right: 35px;
  padding-left: 10px;
  margin: auto 0px;
  vertical-align: middle;
}

#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
  position: absolute;
  line-height: 18px;
  z-index: 20;
  background-color: #000;
  text-align:left;
  visibility: hidden;
  left:  421px;
  top:207px;
  padding: 7px;
  padding-left: 25px;
}

#anylinkcss3 和进一步表示下拉列表的样式，而 #navigation_bar 样式用于整个栏.无论我在哪里添加任何边框样式，都不会出现，即使在我注释掉所有 CSS 代码并且只在这些 ID 和类上包含一个边框之后也是如此.

The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.

我当前的菜单位于我上面发布的链接中，如果有人可以查看并告诉我为什么可能会出现边框问题，我将不胜感激.这是我的第一篇 Stack Exchange 帖子，所以我希望这是正确的格式！

My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!

推荐答案

虽然设置了宽度和颜色，但不能省略带边框的样式参数.

Although you set the width and color, you can not leave out the style parameter with borders.

要获得您在图像中呈现的预期效果 - jsFiddle 演示一个>

• 的深色背景色
  上的宽边框
  • a margin-bottom: 2px 作为底部边框 - 显示 ul 背景
  • 以及一些小的调整，如文本缩进等
  • dark background color for the <ul>
  • a wide border-left on the <li>
  • a margin-bottom: 2px as bottom border - shows ul background
  • and a few small tweaks like text-indent etc

  关于边界的一些信息

  CSS 边框由 3 个参数组成

  CSS borders consist of 3 parameters

  • 边框宽度
  • 边框样式
  • 边框颜色

  您可以设置一个值，适用于所有面

  You can set one value, which applies to all sides

  border-width: 5px;
  border-style: solid;
  border-color: red;
  

  或者用简写border: 5px solid red; 也适用于所有边.

  Or with short hand border: 5px solid red; and also applies to all sides.

  您可以单独设置每个边框的样式，就像上面所做的那样.

  You can style each border side individually, as you are doing above.

  • 边框边宽
  • 边框样式
  • 边框边颜色

  示例:

  border-left-width: 5px;
  border-left-style: solid; 
  border-left-color: white; 
  

  这也可以用速记来完成:border-left: 5px solid white;

  Which can be accomplished also with shorthand: border-left: 5px solid white;

  了解更多信息和其他边境机会

  For more information and other border opportunities

  • https://developer.mozilla.org/en-US/文档/网页/CSS/边框
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

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