Question

我正在尝试设置我的导航菜单设计样式以反映timeanddate.com上的那个，如下图所示：

enter image description here

要创建颜色，他们在CSS中使用简单的左下边框。

我正在尝试在我的网站沙箱http://www.escapetech.com:8080上为我的<li>代码添加边框。

我正在使用以下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和类上包含边框之后。

我目前的菜单现已发布在我上面发布的链接中，如果有人可以查看并让我知道为什么边框出现可能存在任何问题，我将不胜感激。这是我的第一个Stack Exchange帖子，所以我希望这个格式正确！

Answer 1

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

为了获得您在图片中显示的效果 - jsFiddle demo

<ul>
<li>
margin-bottom: 2px作为底部边框 - 显示ul背景
和一些小的调整，如text-indent等

有关边框的一些信息

CSS边框由3个参数组成

边界宽度
边界风格
边框颜色

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

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

或用短手border: 5px solid red;也适用于所有方面。

您可以像上面一样单独设置每个边框的样式。

边界侧宽度
边界侧式
边界侧色

示例：

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

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

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

Answer 2

啊......大脑你打败了我。我插入了边框样式，然后是＆＃34; BORDER＆＃34;

border: 5px solid white;

Answer 3

实际上他的案例中的技巧是边框应用于锚标签而不是列表！干杯! :)是的，如果你将border-color应用为属性，你也应该应用border-style和border-width：）

CSS边框没有出现

3 个答案: