具有跨浏览器兼容性的ul在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用一些背景填充剩下的部分。我想避免使用指定li fillgap宽度的代码，具体取决于之前lis的长度。因此，我希望在绝对定位中使用最后一个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;
    }