这是我的代码:http: //jsfiddle.net/8z4aw/
我想要一堆表现得像一张桌子的 div。正如你所看到的,我已经明确指定了它们的宽度,但是浏览器完全忽略了它并做它想做的事。此外,这些 div 似乎有一个右边距,没有在任何地方指定。那么它是从哪里来的呢?如何解决这两个问题?
忽略下面的代码,仅粘贴它以便帖子通过
.standardTable {
color: #fff;
}
这是我的代码:http: //jsfiddle.net/8z4aw/
我想要一堆表现得像一张桌子的 div。正如你所看到的,我已经明确指定了它们的宽度,但是浏览器完全忽略了它并做它想做的事。此外,这些 div 似乎有一个右边距,没有在任何地方指定。那么它是从哪里来的呢?如何解决这两个问题?
忽略下面的代码,仅粘贴它以便帖子通过
.standardTable {
color: #fff;
}
你有几个选择:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
我的首选是将父元素的字体大小设置为 0 并手动设置子元素的字体大小:
这是我在 CSS 中更改的内容:
.standardTable {
font-size: 0;
}
.standardTable .td,
.standardTable .th,
.standardTable .tr {
font-size: 18px;
}
好吧,宽度没有表现出来,因为由于“th”和“td”类,它们上有两组不同的填充。
因此,任何具有“th integer”类的东西都将具有 181px 的宽度和 10px 的填充。这加起来总宽度为 201px
但是,任何具有“td integer”类的东西都有 181px 的宽度和 20px 的填充,这意味着它们的总宽度为 221px
因此,由于您的填充,它们之间总是会有 20px 的差异。
你有一个“右边距”的原因是因为具有类“standardTable”的表格实际上是从 js fiddle 窗口继承它的宽度,这意味着它是 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;
}
这是一个工作小提琴: