Question

获取此CSS代码段：

.table {
    display:table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}

除了一些HTML：

<div class="table">
    <div class="table-row">
        <div class="table-cell">
            <label>Label One</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <label>Label Two</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <label>Label Three pushes this table</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <label>Label Four</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <label>Label Five</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
</div>

以下是缩放的样子：100％：

现在，我将页面放大到400％：

当我将缩放重置回100％时，这就是我所看到的：

这是fiddle我用过的。

这在Chrome 28,29和30上搞砸了，它在Firefox，Safari，Opera上运行良好，是的， Internet Explorer 不会弄乱这些单元格行的填充。< / p>

除了不使用display:table/table-row/table-cell的显而易见的解决方案之外，如何更改html / css的方式Chrome将尊重间距，无论缩放？

Answer 1

您使用的数据看起来不像表格，但有多种方法可以实现上述目标。您可以简单地使用列表和跨度来对齐。所以不要使用这个

<div class="table-row">
    <div class="table-cell">
        <label>Label Three pushes this table</label>
    </div>
    <div class="table-cell">
        <input type="text">
        </div>
    </div>
</div>

您可以使用

<ul>
    <li>
        <label>Hello</label>
        <input type="text" />
    </li>
    <li>
        <label>Hello</label>
        <input type="text" />
    </li>
    <!-- Some more li elements here -->
</ul>

Demo（看起来非常整洁）

您还可以使用以下CSS来控制元素间距

label {
    display: inline-block;
    margin-right: 5px;
}

ul li {
    margin-top: 10px;
}

Demo 2

如果你想坚持使用表格布局，我建议你在这里使用table元素，而不是为一个cell使用大量的html和类。

例如

<div class="table-row">
    <div class="table-cell">
        <label>Label Two</label>
    </div>
    <div class="table-cell">
        <input type="text">
    </div>
</div>

可以简单地写成（感觉更清洁）

<tr>
  <td></td>
</tr>

一些CSS优化......

如果您想将div作为.table直接儿童，可以使用

.table > div {
   /* This way you can remove all classes with name table-row */
}

要定位单元格，您可以删除table-cell类并使用

.table > div > div {
   /* This way you can remove all classes with name table-cell*/
}

缩放显示：Chrome上的表格

1 个答案: