Css IE6、IE7：将最后一个li拉伸到前一个li的累积宽度'；s

鉴于此标记：

<ul class="grafiek">
    <li class="first-child">item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li class="last-child">item</li>
</ul>

IE6将最后一个

拉伸到

父级的总宽度。IE7一点也不拉伸它。我如何使它在这两种浏览器中也工作

---

注：Firefox、Chrome和Opera可以正常工作。

可以为ul.grafiek定义一个明确的宽度吗？如果是这样的话，IE应该能解决这个问题，因为它在计算浮动的总宽度时有问题。

尝试设置

位置：相对和/或
缩放：1
在ul.grafiek上，我曾疯狂地试图以一种干净的、只使用CSS的方式来完成这项工作，但我最终得出的结论与你大致相同。IE6首先计算最后一个列表项的100%宽度，然后将父项环绕。（我的IE7不工作，无法测试。）

我可以建议您为所有不同数量的项目创建类（最大为屏幕宽度所能容纳的数量），并修改UL的类以匹配LI的内部数量（同样，最大为相同的数量）

因此，您的UL获得一个等级：

<ul class="grafiek items6_grafiek">
    <li class="first-child">item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li class="last-child">item</li>
</ul>

如果在JS中动态添加项，可能需要将itemsN_grafiek类更改为正确的类。
我注意到最后一个元素的高度是固定的。这为我们打开了尝试一些绝对定位技巧的大门，我认为（加上一些CSS黑客或条件注释）会让你得到你想要的东西

如果我像这样更改ul.grafiek

：

ul.grafiek {
    float: left;
    position: relative;      
    border: 1px dashed gray; /* just for visualization while working on the problem */
    margin: 0;               
    padding: 1px;
    *padding-bottom: 33px;
}

并添加

*位置：绝对和
*底部：0
到ul.grafiek li.最后一个孩子

，我发现Firefox 3.6、Safari 4、IE6和IE7中的情况基本相同

---

我之所以这么说，主要是因为IE和其他东西在

li

高度上存在一些差异。如果您添加doctype声明，这些将消失，但布局将再次在IE6中中断：|

不，对不起，这只是最后的办法。我希望它能够容纳任意数量的前面的

具有相同的宽度和左边距。除非有一些我不知道的模糊css解决方法，否则您必须以像素为单位指定显式宽度，或者使用JS计算。@fire:对于IE，您可以有条件地包括css（条件注释）并使用（JavaScript）动态计算总宽度。可能比用IE黑客破坏基于标准的CSS要好。@Tomalak，是的，我也想过。如果其他一切都失败了，这也可能是一种选择。这绝对是真的。我想知道的是，这两个选项中的任何一个是否会给IE一个额外的提示，它似乎需要为width语句获得适当的上下文。事实证明，正如你正确地预测的那样，它们都没有做任何其他事情。。。但设置

位置：绝对在最后一个问题上，李做了（参见我的另一个答案）。
.items1_grafiek {width: 56px}
.items2_grafiek {width: 118px}
.items3_grafiek {width: 180px}
.items4_grafiek {width: 242px}
.items5_grafiek {width: 304px}
.items6_grafiek {width: 366px}

ul.grafiek {
    float: left;
    position: relative;      
    border: 1px dashed gray; /* just for visualization while working on the problem */
    margin: 0;               
    padding: 1px;
    *padding-bottom: 33px;
}