具有跨浏览器兼容性的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.这使得position: absolute李相对于.ul-length.

这可以让你改变width从1300px到100%;

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

不过,我不太清楚为什么你需要添加position: absolute它li.如果你想让它准确地留在原因所在的地方position: absolute呢？