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

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

2013-04-21 Matt Brown

如果你不想改变你的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）

来源

2013-04-21 14:48:56

尝试应用此CSS的导航栏：

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

来源

2013-04-21 14:33:09 themunna

我问这个问题，并发现有人问在这里。这个答案是迄今最简单的，并得到我的投票。 – ruffle 2017-01-10 01:36:44

使用边框和padding：

* { 
    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

来源

2013-04-21 14:36:03 bookcasey

我会申请大纲的UL标签，所以CSS应该是：

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

来源

2013-04-21 14:38:26

轮廓不应该用作元素的静态样式。它意味着被用作要素突出的视觉标记。：焦点使用它来显示例如你在哪里以及键盘用户使用它来浏览网页。边界属性更适合静态样式。 – Hoshts 2015-10-24 02:18:33

最简单的是填充添加到导航元素，4PX是一个很好的李元素的宽度。还要添加浮点数：左边

现在将border-top和border-bottom添加到ul元素。添加浮动：在这里也是如此。这将切换你的李元素，因为他们有一个固定的宽度。降低他们的宽度到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; 
}

来源

2013-04-21 14:38:34 Hoshts

如果10是一样的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; 
}

来源

2018-02-12 10:54:04

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

回答

相关问题