Question

代码：

＆＃13;

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

＆＃13;

在上面的示例中，链接无法访问。这是一个预期的CSS行为吗？有没有适当的修复？

到目前为止，我提出了一些劣质解决方案：

制作所有浮动元素position:relative和z-index:1：显然不是一个好的通用解决方案。
Overflow:hidden在ul元素上：可以访问链接，但列表元素会在浮动内停止。
Overflow:hidden在li元素：链接可访问，列出包围浮点数的元素。但:before内容变得不可见。
z-index: -1在li个元素上：浮动内容中的链接变为可访问，以换取列表中的链接变得无法访问。

并且，经过一些进一步的思考后，我最终给出了所有:link元素position:relative和z-index:1。显然不太理想，但我认为到目前为止这是一个缺点最少的那个。

Answer 1

您可以将所有链接包装在div中并使用此样式设置该包装：

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

就像这个fiddle。

<强>更新

另一种可能的解决方案可能是将z-index的{{1}}设置为低于0的值。如下所示：

<li>

这是fiddle。

更新2

这是另一种可能的解决方案，涉及设置负边距并对ul > li { position: relative; z-index:-1; }内容使用转换。这有点hacky但我可能在你的情况下工作。

添加以下样式：

:before

删除此样式：

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

这是fiddle。

CSS相对元素阻碍浮动

1 个答案: