【问题标题】:Unwanted borders in unordered list menu无序列表菜单中不需要的边框
【发布时间】:2013-03-11 09:28:56
【问题描述】:

我试图找出水平菜单项的边框来自哪里(基于无序列表):http://developers.ttsistemi.com/clive/

我什么都试过了。 我什至尝试将边框(以及以防万一背景、填充和边距)设置为无/透明/0、主元素及其子元素,但我仍然得到这个烦人的边框(你几乎看不到它,但是是否存在,在所有菜单项之间)。

该网站在 WordPress 中并使用 Required+ 子主题(基于 Zurb 的基金会)。

我花了大约 4 个小时试图找到这个边框的来源(使用 Chrome 的开发人员工具检查 CSS),但我被卡住了。我只是没有看到任何剩余的边框设置:父主题可能设置的所有内容现在都应该被覆盖。

【问题讨论】:

    标签: css zurb-foundation


    【解决方案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 */
    

    这是显示缺少边框/框阴影的屏幕截图

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

    【讨论】:

    • 盒子阴影是真正的问题:我自己的 CSS 已经禁用了边框。我专注于边界,没有意识到我看到的是一个阴影。顺便说一句,从屏幕显示来看,我认为您看错了页面:目前只有主页的样式。所有其他页面仍然需要主题。无论如何,您已经找到了解决方案:谢谢!
    【解决方案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 使文字难以看清,我建议您将其删除或为它们添加一个空格。

    【讨论】:

    • 不确定您查看的是哪个页面。您应该查看的唯一页面是主页:所有其他页面还不能被看到,因为目前我只在主页上工作。主页的页脚中没有文字:没有任何“难看”的文字:)
    • 然而,Perfect Dark 的答案是我想要的答案。谢谢。
    猜你喜欢
    • 2014-06-30
    • 2017-04-03
    • 1970-01-01
    • 1970-01-01
    • 2015-02-26
    • 2013-04-05
    • 1970-01-01
    • 2011-01-03
    • 1970-01-01
    相关资源
    最近更新 更多