CSS絶対配置要素のマージンの理解

Question

絶対配置要素のマージンに問題があります。

すでに別の質問で答えられているように、絶対配置された要素のマージンは、静的に配置されていない最初の親コンテナによって決定されます。

CSS absolute positioned elements and margins

以下の例では、リスト項目を動的に生成されたマルチレベルドロップダウンメニューの簡易版です。実際の幅を事前に知ることはできません（javascriptが実装されていない場合）。黄色い背景の「>」は別のドロップダウンレベルを示します。テキストの末尾と ">"の間に5pxのマージンを入れたいです。

は私が設定したときのmargin-leftについて190pxに、 ">" は、右動き出すことに気付きましたhttp://jsfiddle.net/3jzx8jh3

ul.level1 { 
    position: relative; 
    border: 1px solid black; 
    width: 100px; 
} 

ul.level2 { 
    position: absolute; 
    border: 1px solid red; 
} 

span.right { 
    margin-left: 5px; 
    float: right; 
    border: 1px solid black; 
    background-color: yellow; 
} 

li { 
    white-space: nowrap; 
    border: 1px solid blue; 
} 


<ul class="level1"> 
    <li>Link1</li> 
    <li>Link2 
     <ul class="level2"> 
      <li><span class="right">></span>Fear is the path to the dark side</li> 
     </ul> 
    </li> 
</ul> 

を参照してください。マージンが実際には静的に配置されていない親に対して設定されていることを意味します。これは親li要素です。

私はCSSを使用したいだけのマージンを得ることができますか？

代わり
<li><span class="right">></span>Fear is the path to the dark side</li>
使用
<li>Fear is the path to the dark side <span class="right">></span></li>
のおかげ

Answer 1

とあなたの.right

Answer 2

からfloat : rightを削除するには、ただ、フレックスボックスを使用して可能な解決策を投稿したかったです。これはfirefox、chrome、IE11でも問題ありません。しかし、古いIEバージョンでは動作しません。IEのバージョンでは、 ">"が下に並んでいません。

li要素はフレックスボックス（display：flex）になり、要素間のスペースが等しくなることが条件となります（justify-content：space-between）。スパンはもはや浮遊していません。

ul.level1 { 
    position: relative; 
    border: 1px solid black; 
    width: 100px; 
} 

ul.level2 { 
    position: absolute; 
    border: 1px solid red; 
} 

span.right { 
    margin-left: 5px; 
    border: 1px solid black; 
    background-color: yellow; 
} 

li { 
    white-space: nowrap; 
    border: 1px solid blue; 
    display: flex; 
    justify-content: space-between; 
} 

<ul class="level1"> 
    <li>Link1</li> 
    <li>Link2 
     <ul class="level2"> 
      <li>Fear is the path to the dark side<span class="right">></span></li> 
      <li>Fear leads to anger<span class="right">></span></li> 
     </ul> 
    </li> 
</ul> 

フィドルが更新されました。