7

我有这样的布局：小提琴链接

.td 之间是一些空白，即使边距和填充设置为 0。

为什么会发生这种情况以及如何解决这个问题？可能是负边距？或者有什么更好的解决方案？

<style>
.tr {
    height: 20px;
    border: 1px solid black;
    overflow: hidden;
    white-space: nowrap;
    word-spacing: 0;
}
.td {
    display: inline-block;
    height: 20px;
    margin: 0;
    padding: 0;
}
</style>
<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div>
    <div class="td" style="width: 50px; background-color: #AAA;"></div>
    <div class="td" style="width: 50px; background-color: #666;"></div>
</div>
4

6 回答 6

12

解决方案1：添加评论：

<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div><!--
    --><div class="td" style="width: 50px; background-color: #AAA;"></div><!--
    --><div class="td" style="width: 50px; background-color: #666;"></div>
</div>

您也可以将所有内容都写在同一行，但注释看起来更简洁。

解决方案2：添加font-size:0到父元素。不要忘记为子元素定义字体大小：

.tr {
  font-size: 0;
}
.td {
  font-size: 15px;
}
于 2012-08-16T07:09:12.650 回答
2

使用浮动

.td {
    float: left;
    height: 20px;
    margin: 0;
    padding: 0;
 }
于 2012-08-16T07:06:36.260 回答
0

要克服这个问题，您必须将 div 放在一行中：

<div class="td" style="width: 50px; background-color: #CCC;"></div><div class="td" style="width: 50px; background-color: #AAA;"></div><div class="td" style="width: 50px; background-color: #666;"></div>

希望这可以帮助

于 2012-08-16T07:18:29.920 回答
0

内联块元素之间的 sapces/换行符由浏览器显示。您可以删除它们，但最好在您的 td 类上使用某种浮动。

我不确定你想用你的标记显示什么样的数据，但对于表格数据，表格的使用是完美的！;)

于 2012-08-16T07:09:48.580 回答
0

内联块被视为内联元素，因此空格将它们分隔为父元素中的常用单词。

我提出2个解决方案：

  1. 您可以通过删除inline-blockdiv 之间的空格来修复它，如下所示：http: //jsfiddle.net/f3AKu/

  2. 您可以将容器的字体大小设置为 0，这样空格就不会很明显。这样您就不会修改 HTML 标记，只会修改 CSS 规则。示例：http: //jsfiddle.net/wC68h/

于 2012-08-16T07:15:40.620 回答
0

我首选的实现内联块之间零空间的方法是在 CSS 中，父font-size:0有font-size:16px. 也就是说，还有一些其他方法可以使用 HTML 和 CSS 来实现。这是一支活笔：

http://codepen.io/chriscoyier/pen/hmlqF

于 2014-12-24T19:02:27.480 回答