html - CSS 相对元素阻碍 float

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. 使所有 float 元素都为 position:relative 和 z-index:1:显然不是一个好的通用解决方案。
2. Overflow:hidden 在 ul 元素上:链接可访问，但列表元素停止围绕 float 。
3. Overflow:hidden on li 元素:链接可访问，列表元素环绕 float 。但是 :before 内容变得不可见。
4. z-index: -1 on li 元素: float 链接变得可访问，以交换列表中的链接变得不可访问。

而且，经过进一步思考后，我最终决定为所有 :link 元素提供 position:relative 和 z-index:1。显然不理想，但我想这是迄今为止缺点最少的。

Answer 1

您能否将所有链接包装在一个 div 中并使用这种样式设置该包装器:

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

喜欢这个fiddle .

更新

另一个可能的解决方案可能是设置你 z-index你的<li>小于 0。像这样:

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

这是 fiddle .

更新 2

这是另一种可能的解决方案，涉及设置负边距并为您的 :before 使用转换内容。这有点老套，但我可能在您的情况下工作。

添加这些样式:

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

并删除此样式:

ul > li {
    position:relative;
}

这是 fiddle .