Question

我想要一堆表现得像桌子的div。正如您所看到的，我已明确指定了它们的宽度，但浏览器完全忽略它并按照自己的意愿行事。此外，看起来那些div具有正确的边距，这在任何地方都没有指定。那么它来自哪里？如何解决这两个问题？

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

.standardTable {
    color: #fff;
}

Answer 1

您有几个选择：

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

我首选的是将父元素的字体大小设置为0并手动设置子元素的字体大小：

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

这是我在CSS中所做的改变：

.standardTable {
    font-size: 0;
}

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

Answer 2

宽度不正常，因为你有两套不同的填充，由于“th”和“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/

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

2 个答案: