0

拿这个 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% 时，这就是我所看到的：

这是我用来做这个的小提琴。

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

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

4

1 回答 1

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>

演示（看起来很整洁）

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

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

ul li {
    margin-top: 10px;
}

演示 2

不过，如果您想坚持表格布局，我建议您在table这里使用 element 而不是为单个cell.

例如

<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*/
}
于 2013-08-05T07:30:55.687 回答