li在ul内的绝对定位，具有跨浏览器兼容性

Question

我有这样的事情：

<div style="width:1300px">
  <ul class="ul-length ul-textalign">
    <li class="li-horizontal"> A </li>
    <li class="li-horizontal"> B </li>
    <li class="fillgap"/>
  </ul>
</div>

我试图让最后一个 li 用一些背景填充该行的其余部分。我想避免根据前一个 lis 的长度指定 li 填充间隙宽度的代码。因此，我想让最后一个 li 处于绝对定位，并让它占据 ul 的整个宽度：

.fillgap {
  position:absolute;
  width:1300px; /* for some reason, width:100% is longer than the div width... */
  z-index:0;
}

.ul-length {
  with:100%;
}

.ul-textalign {
  text-align:left; /* fix for IE, prevents the absolute li from beginning at the center */
}

.li-horizontal {
   float:left;
}

在整个宽度上设置背景的最简单方法可能是设置 ul 的背景，但我不能这样做，因为它不符合预期的设计。我需要能够用 lis 做到这一点。而我上面的代码在 IE 中导致了一个问题：li fillgap 似乎保留在页面流中，因为它被放在前一个 lis 旁边，而不是在 ul 的开头...

有什么想法吗？

这是预期的结果（在歌剧中）：

这是 IE 中的结果：

Answer 1

将position: relative 添加到.ul-length。这使得 li 上的 position: absolute 相对于 .ul-length。

这使您可以将 width 从 1300px 更改为 100%;

这是一个小提琴：http://jsfiddle.net/joplomacedo/5vykm/

仍然，我不太清楚为什么您需要将position: absolute 添加到li。如果你想让它完全停留在原地，那为什么要position: absolute呢？

Answer 2

  .ul-length li{
        z-index:2;
        position:relative;
    }
.ul-length li.fillgap {
    background: none repeat scroll 0 0 red;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    top:0;
    left:0
}

    .ul-length {
      with:100%;
      position:relative;
    }