Question

我想弄清楚水平菜单项上的边框来自哪里（基于无序列表）：http://developers.ttsistemi.com/clive/

我已经尝试了一切。我甚至试图将边框（以及背景，填充和边距）设置为无/透明/ 0，设置为主元素及其子元素，但我仍然会看到这个恼人的边框（你几乎看不到它，但是在所有菜单项之间存在。）

该网站位于WordPress中，并使用必需+儿童主题（基于Zurb的基金会）。

我花了4个小时试图找到这个边界的来源（用Chrome的开发者工具检查CSS），但是我被卡住了。我只是没有看到剩余的边框设置：父主题可能设置的所有内容应该是现在覆盖的所有内容。

Answer 1

1）对于.navbar > li，删除当前设置的这些属性：

.navbar > li {
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; /* Delete */
border-width: 1px medium 1px 1px; /* Delete */
border-style: solid none solid solid; /* Delete */
border-color: #333333 -moz-use-text-color #333333 #333333; /* Delete */

2）因为您使用<li>伪选择器选择了上一个:last-child，所以您必须单独更改它，否则您将在最后一个菜单项上设置边框。所以删除：

.navbar > li:last-child {
border-right: 1px solid #333333; /* Delete */
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 
            1px 0 0 rgba(255, 255, 255, 0.2); /* Delete */

以下是显示缺少边框/ box-shadow

的屏幕截图

http://img38.imageshack.us/img38/5845/menu2b.jpg

Answer 2

我看一下，只是不知道你要删除哪个边框，也许是菜单中的边框，我在这里找到了它：

.home #container #content-wrapper #access {
   font-family: 'Museo Slab';
   width: 100%;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   background-color: rgba(236, 236, 236, 0.5);
   margin: 0;
   padding: 0;
   text-align: center;
}

在app.css第101行，删除此边框将不再显示。

在Dark的回答中，我也检查了它：我认为nav id="access"的宽度不正确，它应该像这样改变：

.eight, .row .eight {
width: 38.66667%;
}

我看到你的background-image页脚会让文字很难看，我建议你删除它或为它们添加一个空格。

无序列表菜单中的不需要的边框

2 个答案: