导航栏边框问题
导航栏边框问题
我正在设计一个新的首页，尽量避免使用图片，但是导航栏的边框出现了一点问题。我无法想出一种方法让边框的两侧通过内边距连接在一起。目前两侧没有接触，看起来不连续。我可能漏掉了一些明显的东西，但我想不出一种方法来使它们相连。有人有什么想法吗？
我唯一能想到的解决方法是给每个li元素添加类，但我想知道是否有其他的可选方法。
这里有一个Fiddle供您查看：
导航栏边框问题（Nav bar border issue）是由于列表项之间存在间隙导致的。解决方法是将列表项浮动到左侧，而不是在一行显示。然后将列表本身相对定位，并稍微向上移动。
原因：
列表项默认以行内元素显示，它们之间存在间隙。
解决方法：
1. 将列表项浮动到左侧，使用CSS的float属性，将ul元素的float属性设置为right，将li元素的float属性设置为left。
2. 将列表本身相对定位，使用CSS的position属性，将ul元素的position属性设置为relative。
3. 向上移动列表，使用CSS的top属性，将ul元素的top属性设置为-14px。
代码示例：
- Item 1
- Item 2
- Item 3
ul{
float: right;
position:relative;
top:-14px;
}
li{
float:left;
padding: 11px 12px 11px 12px;
border: solid 1px #c1c1c1;
}
你可以在这个[jsFiddle示例](http://jsfiddle.net/j08691/WZF4M/4/)中尝试以上解决方法。
(Nav bar border issue)这个问题出现的原因是由于li元素的默认样式造成的。li元素在不同浏览器中的默认样式略有差异，导致边框显示不一致。解决方法是通过修改li元素的样式来统一显示。
一种解决方法是在li元素的样式中添加margin-right: -5px;属性，这样可以微调边框的显示效果。但需要注意的是，这种方法可能在某些浏览器中未经测试，因此可能存在兼容性问题。
另一种更优雅的解决方法是通过修改HTML代码来解决。可以参考How do I remove extra margin space generated by inline blocks?中的回答。具体做法是将li元素的直接相连，去除它们之间的空格，这样可以解决边框显示不一致的问题。
下面是示例的HTML代码，可以根据实际情况进行修改：
<ul>
<li>Test</li><li>Apple</li><li>Cat</li><li>Dog</li>
</ul>
需要注意的是，尽管这种方法可以解决大部分浏览器中的显示问题，但在某些情况下，在Firefox浏览器中可能仍然存在底部边框与其他浏览器相比多出1像素的情况。同时，此外还会出现奇怪的空白问题。
通过调整li元素的样式或修改HTML代码，可以解决(Nav bar border issue)这个问题。
问题原因：在菜单中的
解决方法：只在菜单中的
原文整理如下：
为了使界面更连续，你可以在菜单中的
我已经更新了你的fiddle。
如果这是你想要的，请告诉我。