css - 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. 这使得position: absoluteli 相对于.ul-length。

这使您可以将widthfrom更改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;
    }