CSS мешает плавать

Question

Код:

<style> 
 
div { 
 
    width: 500px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    line-height: 1.25em; 
 
} 
 

 
ul > li { 
 
    position: relative; 
 
} 
 

 
ul > li:before { 
 
    content: "\2022"; 
 
    position: absolute; 
 
    font-weight: bold; 
 
    font-size: 30px; 
 
    line-height: inherit; 
 
    left: -0.75em; 
 
} 
 
</style> 
 
<div> 
 
<span style="float:right"><a href="http://google.com">Test link</a><br/> 
 
<a href="http://google.com">Test link</a><br/> 
 
<a href="http://google.com">Test link</a><br/> 
 
<a href="http://google.com">Test link</a><br/> 
 
<a href="http://google.com">Test link</a></span> 
 
<ul> 
 
<li>The <a href="http://google.com">glowing steel</a> is extremely hot and will harm anyone that touches it. Jumping into the slag bucket is an instant death, regardless of [[Damage Threshold]].</li> 
 
<li>The ''"Lucky 38 Executive Override"'' option on the terminal on the second level was originally supposed to be part of the quest [[The Moon Comes Over the Tower]], but that section was cut. See that quest's notes section for details.</li> 
 
<li>The three Mr. Steels found inside, as well as the fiends, respawn every three game days.</li> 
 
</ul> 
 
</div>

В приведенном выше примере ссылки недоступны. Является ли это предполагаемым поведением CSS? Есть ли правильные исправления?

До сих пор я придумал несколько низших решений:

1. Сделать все поплавковые элементы position:relative и z-index:1: Очевидно, что не хорошее общее решение.
2. Overflow:hiddenul элемент: Ссылки доступны, но элементы списка останавливают обертывание вокруг поплавка.
3. Overflow:hiddenli элемент: Ссылки доступны, элементы списка обертываются вокруг поплавка. Но контент :before становится невидимым.
4. z-index: -1li Элементы: Ссылки в поплавках становятся доступными в обмен на ссылки в списке, становящиеся недоступными.

И, после некоторых дальнейших размышлений я закончил на давая все :link элементы position:relative и z-index:1. Не идеально, но я думаю, что это тот, у которого есть наименьшие недостатки.

Answer 1

Вы можете обернуть все ваши ссылки в DIV и установить, что обертку с этим стилем:

.link-wrapper{ 
    position:relative; 
    z-index:9; 
} 

как в этом fiddle.

UPDATE

Другим возможным решением может быть установлено вам z-index ваших <li> «с чем-то ниже 0. Как это:

ul > li { 
    position: relative; 
    z-index:-1; 
} 

Вот fiddle.

UPDATE 2

Вот еще один из возможных решений, что включает установку отрицательного запаса и с помощью преобразования для :before контента. Это немного взломано, но я может работать в вашей ситуации.

Добавьте эти стили:

ul > li:before { 
    display:inline-block; 
    margin-left:-20px; 
    margin-right:10px; 
    transform:translateY(5px); 
} 

И удалить этот стиль:

ul > li { 
    position:relative; 
} 

Вот fiddle.