Div具有不同于指定的宽度，也具有未指定的边距

Question

下面是我的代码:http://jsfiddle.net/8z4aw/

我想有一堆div的行为像一个表。正如您所看到的，我已经显式地指定了它们的宽度，但是浏览器完全忽略了它，并做它想做的事情。此外，这些div似乎有一个右边距，没有指定任何地方。那么它是从哪里来的呢?如何解决这两个问题?

忽略下面的代码，只粘贴它以便post将通过

.standardTable {
    color: #fff;
}

Answer 1

您有两个选择:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

我倾向于将父元素的font-size设置为0，并手动设置子元素的font-size:

http://jsfiddle.net/8z4aw/9/

这是我在CSS中修改的内容:

.standardTable {
    font-size: 0;
}
.standardTable .td, 
.standardTable .th,
.standardTable .tr {
    font-size: 18px;
}

Answer 2

由于"th"one_answers"td"类的原因，宽度没有表现出来，因为它们有两组不同的内边距。

所以，任何带有"th integer"类的内容都将具有181px的宽度和10px的填充。加起来总宽度为201px

然而，任何带有"td integer"类的东西的宽度为181px，填充为20px，这意味着它们的总宽度为221px

因此，由于你的填充，这些总是会有20px的差异。

你有一个"右边距"的原因是因为表类"standardTable"实际上是继承它的宽度从js提琴窗口，这意味着它是100%。你需要将它设置为一个固定的值，这个值加起来等于里面所有的单元格。

你可以在这里看到问题:

            <div class="th integer">
                Podkategorii
            </div>
            <div class="td integer">
                0
            </div>

---

            .standardTable .th {
                display: inline-block;
                background-color: #2b5797;
                padding: 10px;
            }
            .standardTable .td {
                display: inline-block;
                background-color: #2d89ef;
                padding: 20px;
            }

这是一个工作小提琴:

http://jsfiddle.net/shayl/8z4aw/13/