-2

在 CSS 文件中，我有以下规则：

div.breadcrumbs span {
    position: relative;
    left: -120px;
    height: 16px;
    line-height: 16px;
    margin: 0 20px;
    overflow: hidden;
}

div.breadcrumbs img {
    margin: 0 -20px;
    padding: 5px 5px 0px 5px;
}

div.breadcrumbs a {
    color: #88263F;
    font-weight:bold;
}

img和工作的规则a，但不是span。

还有一些东西不起作用

span {
    display: none;
}

目前我不知道如何调试它。

4

2 回答 2

4

原则上，您发布的 CSS 有效。

如果您的 HTML 看起来像这样...

<div class="breadcrumbs">
    These are <span>breadcrumbs</span> in a line...
</div>

这是你的 CSS：

div.breadcrumbs span {
    position: relative;
    left: -120px;
    height: 16px;
    line-height: 16px;
    margin: 0 20px;
    overflow: hidden;
}
span {
    display: none;
}

然后该span元素未按您的预期显示。

参见演示：http: //jsfiddle.net/audetwebdesign/qyu5A/

您可能会遇到其他问题，例如其他 CSS 规则发生冲突并阻止display: none属性正常工作。

内联元素的定位并没有错，但是根据行高和周围的内容，您可能无法完全得到您期望的结果。

您可能想了解更多关于 CSS 级联和特异性如何工作的信息。

参考：http ://www.w3.org/TR/CSS2/cascade.html#cascade

注意：对于内联元素，该height属性将被忽略。

于 2013-09-04T11:04:35.140 回答
-1

感谢您的提示，尤其是小提琴！

玩弄它，我在 CSS 文件中也发现了以下代码片段：

body.home div.breadcrumbs span { position:relative; left:0; }

在此之后放置“div.breadcrumbs span”并删除“position：relative;” 它按预期工作。

于 2013-09-07T19:04:34.533 回答