blocks|key|867589|text|如果你根本不想改变你的html，你可以添加到你的css中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|867590|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;
}|code-block|syntax|javascript|867591|并从li元素中删除背景色(因为我将它添加到了ul中)|offset|length|style|CODE|867592|entityMap^0|0|0|2|2|M|2|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

If you do not want to change your html at all, you can add this to your css

<pre><code>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;
}
</code></pre>

and remove the background-color from the <code>li</code> elements (since i added it to the <code>ul</code>)

blocks|key|2991881|text|尝试将此CSS应用于导航栏：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2991882|border-top:+1px+solid+#eee
border-bottom:+1px+solid+#eee|code-block|syntax|javascript|2991883|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try applying this CSS to the nav bar:

<pre><code>border-top: 1px solid #eee
border-bottom: 1px solid #eee
</code></pre>

blocks|key|867529|text|使用边框和填充：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|867530|*+{
++++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;
}|code-block|syntax|javascript|867531|Demo|offset|length|867532|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/bfqLj/^0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Use borders and padding:

<pre><code>* {
 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;
}
</code></pre>

<a href="http://jsfiddle.net/bfqLj/" rel="nofollow">Demo</a>

blocks|key|2991904|text|我会对ul标记应用一个大纲，所以css应该是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2991905|nav+ul{
++outline-color:+white;
++outline-style:+solid;
++outline-width:+2px;
++outline-offset:+-7px;
++height:+60px;
++width:+848px;
}|code-block|syntax|javascript|2991906|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I would apply an outline to the ul tag, so the css should be:

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

blocks|key|867572|text|最简单的方法是向nav元素添加填充，4px可以很好地处理li元素的宽度。同时添加浮点:左|type|unstyled|depth|inlineStyleRanges|entityRanges|data|867573|现在将border-top和border-bottom添加到ul元素中。在这里也添加浮动:+left。这将切换您的li元素，因为它们具有固定的宽度。把它们的宽度降低到210px，这样就没问题了。|867574|添加到代码中的CSS：|867575|nav+{
++padding:+4px
++float:+left;
}

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

nav+li+{
++width:+210px;
}|code-block|syntax|javascript|867576|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The easiest is to add a padding to the nav element, 4px makes good with width of li elements. Also add float: left

Now add border-top and border-bottom to the ul element. Add float: left here as well. This will switch your li element around as they have a fixed width. lower the width of them to 210px and things should be fine.

CSS additions to your code:

<pre><code>nav {
 padding: 4px
 float: left;
}

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

nav li {
 width: 210px;
}
</code></pre>

blocks|key|116957|text|如果line-height与font-size相同，您可以通过更改列表元素的padding-bottom来操纵边界距离，下面是我的示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|116958|.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;
}|code-block|syntax|javascript|116959|entityMap^0|2|B|E|9|12|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

If <code>line-height</code> is the same as <code>font-size</code> you can manipulate border distance by changing <code>padding-bottom</code> of list element, here is my example: 

<pre><code>.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;
}
</code></pre>

How do I add a rule above and below my nav bar? I tried an HR tag, but that seemed to make a lot of space around the nav bar. Here is my html and here is the example of how I want to do it.

<a href="http://matthewtbrown.com/jeffandcricketquilt/" rel="nofollow">http://matthewtbrown.com/jeffandcricketquilt/</a>

<a href="http://matthewtbrown.com/jeffandcricketquilt/rule.png" rel="nofollow">http://matthewtbrown.com/jeffandcricketquilt/rule.png</a>

CSS hr tag in a nav bar with a margin

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何在导航栏的上方和下方添加规则？这是我的html，这是我想要做的例子。

问带边距的导航栏中的CSS hr标签
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带边距的导航栏中的CSS hr标签EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带边距的导航栏中的CSS hr标签
EN