0

私はWordPressを使用してメニューを追加しており、各ナビゲーションボタンの後にコンテンツを追加しようとしています。理想的には、各ナビゲーションボタンの後にバックグラウンドスペーサーとして機能するタグを追加したかった<li>のですが、ではそれができないようです:after。

次に、このようなものを使用する別の方法を試しました。

#header .nav li:after {
    content: " ";
    position: relative;
    display: block;
    width: 2px;
    min-width: 2px;
    height: 45px;
    min-height: 45px;
    background: url('images/nav-button-spacer-bg.png') left top no-repeat;    
}

その結果、スペーサーはメニューの真下に配置されたため、水平方向には正しい位置に配置されましたが、垂直方向には配置されませんでした。

positionをに変更してabsolute追加することで修正しましたtop: 0px;。

ulこれで修正されたようですが、タグと包含div要素の両方にがposition含まれているので、これが正しいかどうか疑問に思います。staticまた、nowabsoluteアイテムがそれらにどのように付着しているか疑問に思います。

疑似要素の動作が異なると推測しているため、親要素の位置が。である必要がないのはなぜですかfixed, relative or absolute。

私は自分の考えが正しいですか、これは私がする必要があることを行うための最良の方法ですか？

4

1 に答える 1

1

This is a perfectly fine way! I suppose you just missed an element with actually did have position: relative; on it. See this example for a demonstration of absolute positioned pseudo elements: http://jsfiddle.net/mytJ3/

But you should notice that if you have a absolute positioned element and ommit some of the top, bottom, left, right properties the position calculating will some how fallback to a way as if the element were static positioned. See this answer: https://stackoverflow.com/a/10244977/723769

于 2012-08-21T08:34:11.687 に答える