1

私はこのようなものを持っています:

<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 は、ul の先頭ではなく、前の lis の隣に配置されているため、ページ フローに保持されているようです...

何か案が？

予想される結果は次のとおりです（オペラで）： ここに画像の説明を入力

IE での結果は次のとおりです。 ここに画像の説明を入力

4

2 に答える 2

5

に追加position: relativeし.ul-lengthます。これにより、position: absoluteが に相対的になり.ul-lengthます。

widthこれにより、から1300pxに変更できます100%;

ここにフィドルがあります：http://jsfiddle.net/joplomacedo/5vykm/

それでもposition: absolute、なぜに追加する必要があるのか​​ よくわかりませんli。正確にその場所に留まらせたいのなら、それはなぜposition: absoluteですか？

于 2012-08-02T12:55:20.440 に答える
0 
  .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;
    }
于 2012-08-02T12:55:40.510 に答える