Question

如何在导航栏上方和下方添加规则？我尝试了一个HR标签，但这似乎在导航栏周围留出了很多空间。这是我的html，这是我想要做的例子。

http://matthewtbrown.com/jeffandcricketquilt/

http://matthewtbrown.com/jeffandcricketquilt/rule.png

Answer 1

如果您根本不想更改html，可以将其添加到您的CSS

nav ul:before {
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    bottom: 5px;
    content: "";
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index:0;
}
nav ul {
    overflow: auto;
    position: relative;
    background-color:#000;
}
nav ul li{
    position:relative;
    z-index:10;
}

并从li元素中移除背景颜色（因为我将其添加到ul ）

Answer 2

尝试将此CSS应用于导航栏：

border-top: 1px solid #eee
border-bottom: 1px solid #eee

Answer 3

使用边框和填充：

* {
    margin: 0;
    padding: 0;
}

nav {
    text-align: center;
    background: black;
    color: white;
    padding: .2em;
}

ul {
    padding: .5em;
    border: 1px solid white;
    border-left: none;
    border-right: none;
}



nav li {
    display: inline;
    list-style-type: none;
    padding: 0 2em;
}

Demo

Answer 4

我会将大纲应用于ul标签，因此css应为：

nav ul{
  outline-color: white;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: -7px;
  height: 60px;
  width: 848px;
}

Answer 5

最简单的方法是在nav元素中添加填充，4px可以很好地处理li元素的宽度。还要添加float：left

现在将border-top和border-bottom添加到ul元素。添加浮动：也留在这里。这会切换你的li元素，因为它们有一个固定的宽度。将它们的宽度降低到210px，事情应该没问题。

CSS添加到您的代码：

nav {
  padding: 4px
  float: left;
}

nav ul {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  float: left;
}

nav li {
  width: 210px;
}

Answer 6

如果line-height与font-size相同，您可以通过更改列表元素的padding-bottom来操纵边距，这是我的示例：

.headerSection ul.navigation li  a {
    font-size: 12px;
    line-height: 12px;
    text-decoration: none ;
    padding-bottom: 10px; 
    border-bottom-color: transparent;
    border-bottom-width: 5px;
    border-bottom-style: solid;
} 

.headerSection ul.navigation li a:hover {
    border-bottom-color: #e8bf5d;
}

带有边距的导航栏中的CSS hr标记

6 个答案: