CSS Понимание маржи в элементах с абсолютным расположением

Question

У меня возникают проблемы с полями в абсолютно позиционированных элементах.

Как уже было сказано в другом вопросе, поля в абсолютно позиционированных элементах продиктованы первым не статически расположенным родительским контейнером.

CSS absolute positioned elements and margins

В приведенном ниже примере представляет собой упрощенную версию многоуровневого выпадающего меню, в котором элементы списка генерируются динамически. Это означает, что заранее невозможно узнать фактическую ширину (если не реализован какой-либо javascript). «>» С желтым фоном указывает другой уровень выпадающего списка. Я хотел бы иметь 5px margin между концом текста и «>».

См 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> 

Я заметил, что, когда я установил запас налево до 190px, то «>» начинает двигаться вправо. Это означает, что поле действительно установлено в отношении нестатически позиционированного родителя, это элемент родительского li.

Могу ли я получить запас по желанию, используя CSS?

Благодаря

Answer 1

вместо
<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>
и удалить float : right из вашего .right

Answer 2

Просто хотел отправить возможное решение с помощью гибкого окна. Это будет хорошо в firefox, chrome и IE11. Тем не менее, он не будет работать в более старых версиях 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> 

Сценарий обновлен.