CSS相对定位元素阻塞浮动。

Question

CSS相对定位元素阻塞浮动。

3

Code:

<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行为吗？是否有任何适当的解决方法？

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

使所有浮动元素的position:relative和z-index:1：显然不是一个好的通用解决方案。
ul元素的overflow:hidden：链接可访问，但列表元素停止围绕在浮动元素周围。
li元素的overflow:hidden：链接可访问，列表元素围绕浮动元素包裹。但是，:before内容变得不可见。
li元素的z-index:-1：在交换具有访问性的浮动链接和列表中不可访问的链接之间进行选择。

经过进一步思考后，我最终决定给所有的:link元素添加position:relative和z-index:1。显然并不理想，但我认为它是目前缺点最小的解决方案。

- Slider2k

只是不要使用浮点数 - 它总是存在问题，而 display: inline-block 大多数时候可以达到相同的效果。 - Scott Selby

你如何使用display:inline-block实现浮动效果？ - Slider2k

inline-block 将元素放在同一行，就像 float 一样。 - Scott Selby

很遗憾，那样做是不够的。 - Slider2k

@Scott Selby：如果你所说的“大多数情况下”能够达到相同的效果，那么这并不是其中之一。首先，考虑到一个发生在IFC上，而另一个发生在BFC上，因此“行”的定义在inline-block和float之间有很大的区别。 - BoltClock

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zgood · Accepted Answer

你可以将所有链接都包含在一个div中，并设置该包装器的样式为：

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

就像在这个代码片段中所示。

更新

另一种可能的解决方案是将<li>元素的z-index设置为低于0的值。就像这样：

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

这里是示例代码。

更新2

这里是另一种可能的解决方案，涉及设置负边距和使用转换来处理:before内容。虽然有点hacky，但在您的情况下可能会起作用。

添加以下样式：

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

并且移除这个样式：

ul > li {
    position:relative;
}

这里是代码演示链接。