html - 摆脱不想离开的偏移量

Question

我有一些嵌套的 div，其中一些应该显示为表格，因为它让我的生活更轻松，但是最里面的一个 div 被赋予了从顶部 16px 的偏移量，我无法摆脱它.

HTML:

<div class="waiting">
    <div class="table-row">
        <div class="time">
            09:55
        </div>
        <div class="customer">
            <div class="cust-name">
                Ana Ling 
            </div>
            <div class="cust-deets">
                Female, 51
            </div>
        </div>
        <div class="menu">
            TODO
        </div>
    </div>
</div>

CSS:

.waiting {
    display:table;
    width:100%;
    padding:0;
    margin:0;
    height:60px;
    color:black;
    background:rgb(134, 145, 149);
    border-collapse:collapse;
    font-family:"Segoe UI",Arial,sans-serif;
}

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

        .waiting .time {
            display:table-cell;
            background:rgb(125, 134, 139);
            width:60px;
            padding:20px 15px;
            font-size:14px;
            color:rgb(65, 73, 75);
        }

        .waiting .customer {
            display:table-cell;
            padding:0;
            color:rgb(27, 35, 38);
            padding:10px 15px;
        }

            .waiting .customer .cust-name {
                font-size:18px;
                margin-top:-16px;                /* Undoing IE offset */
                vertical-align:top;              /* Come on stupid IE */
            }

            .waiting .customer .cust-deets {
                font-size:14px;
                margin:0;
            }

        .waiting .menu {
            display:table-cell;
        }

具体来说，是 cust-name div 从顶部偏移了不必要的 16px，负边距和手动重新分配顶部位置都没有任何作用。我什至尝试在盒子模型中更改控制台中的值，但是无论我将其更改为什么值，16px 都会不断重新声明自己。我也试过在分配 top 值之前将位置设置为 relative ，但这只会使元素的高度变大。

我正在尝试在 IE11 中执行此操作，并且该网站只能在 IE11 上查看，所以如果您有一个只适用于 IE11 的 hacky 解决方案，请给我!

Answer 1

我认为你的做法是错误的。您想要显示表格数据，但又想避免使用实际表格，大概是因为“表格不好”。表格被认为是不适合布局的形式，这是事实，但您显示的是结构化数据。首先将其制作成一张 table 并从那里开始设计，这样可以省去很多麻烦。