html - 显示内联没有 float

Question

我有 3 个表，如下所示: 我想要做的是让它们全部 3 排成一行，每个表之间没有空格(底部表位于红色方 block 所在的位置)。我遇到的问题很明显，但我似乎无法在不使用负边距的情况下摆脱表格之间的差距，我想避免这种情况，因为我听说这不是好的做法(浏览器可能会破坏它)。是否也可以在不 float 表格的情况下对齐表格？我尝试使用其中的一些技巧，但似乎都不起作用:http://css-tricks.com/fighting-the-space-between-inline-block-elements/

这是我的CSS: 我的主体是 901px 宽，所以我只是将每个表的宽度更改为 300

.measure_data {
    width: 299px;
    border: solid 1px;
    border-collapse: collapse;
    display: inline-block;
}

Answer 1

使用 display: inline-block; 时，元素之间的空格是不可避免的。尝试这个。您需要确保将间隙“连接”在一起，如下所示:

<div>
    <p>1/3</p>
</div><!--
--><div>
    <p>1/3</p>
</div><!--
--><div>
    <p>1/3</p>
</div>