-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 に答える