Question

问题是，我需要强制所有div在一行中。具有表格单元行为。 并支持IE7。

链接到小提琴http://jsfiddle.net/Beck/BH5WG/ 以下代码的副本：

HTML：

<div class="wr">
    <div class="con">
        <div class="item">some text1</div>
        <div class="item">some text1 some text1</div>
        <div class="item">some text1</div>
        <div class="item">some text1 some text1</div>
    </div>
</div>

<div class="wr" id="wr2">
    <div class="con">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <div class="item">some text1</div>
                </td>
                <td>
                    <div class="item">some text1 some text1</div>
                </td>
                <td>
                    <div class="item">some text1</div>
                </td>
                <td>
                   <div class="item">some text1 some text1</div>
                </td>
            </tr>
        </table>
    </div>
</div>

的CSS：

.wr {
    width:300px;
    border:1px solid red;
}
.con {
    height:24px;
}
.item {
    float:left;
    white-space:nowrap;
}

#wr2 {
    margin:50px 0px 0px 0px;
}

Answer 1

您可以使用display: table emulation for IE6/7在IE6 / 7中进行精确的演示。 CSS将如下所示：

/* Bind htc behavior to element that should behave like table. */
.con {behavior: url(/js/display-table.min.htc); }

或者这个：

/* Bind htc to BODY and then trigger tably behavior via -dt-display property. */
BODY {behavior: url(/js/display-table.min.htc); }
.con {-dt-display: table; }
.item {-dt-display: table-cell; }

Answer 2

我没有自己的IE7测试环境，但您是否尝试过display:inline-block;而不是float:left？

IE7默认不明白，但它确实理解display:inline; zoom:1;

这可能会使其更愿意遵守white-space:nowrap;

例如，从你的小提琴：

.wr {
    border:1px solid red;
    white-space:nowrap;
}

.con {
    height:24px;
}

.item {
    display:inline-block;
    *display:inline;
    *zoom:1;
}

#wr2 {
    margin:50px 0px 0px 0px;
}

CSS：display：table-cell IE7 +或强制浮动的div在一行中

2 个答案: