带有空格的内联块元素之间的间隙:nowrap 和溢出:滚动父元素

Question

我想显示一个表格(但我使用的是div)，由于表格很长，它将滚动溢出。我遇到的问题是我的div 之间存在未知的差距。

这是片段：是什么导致了列之间不需要的间隙 (div)？

.mobile-cross-reference {
border: 1px solid #2980b9;
color: #333;
float: left;
margin: 2%;
width: 96%;
}

.m-grid-scroll {
overflow-x: scroll;
}
.m-grid-header {
background-color: #2980b9;
color: white;
text-align: center;
}
.m-grid-header,
.m-grid-row {
float: left;
width: 100%;
}
.m-grid-header-col {
background-color: #2980b9 !important;
}
.m-grid-row-inline {
background-color: transparent;
display: inline-block;
float: none;
white-space: nowrap;
}
.m-grid-col {
border-right: 1px solid #ccc;
float: left;
padding: 1% 0 1% 1%;
}
.m-grid-col:last-child {
border-right: 0;
}
.m-grid-col3 {
width: 31%;
}
.m-grid-inline {
display: inline-block;
float: none;
margin: 0;
}

<div class="mobile-cross-reference m-grid-scroll">
<div class="m-grid-header m-grid-row-inline">
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Bourns</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">BI Tech</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Dale/Vishay</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Philips/Mepco</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Murata</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Panasonic</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Spectrol</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Mil Spec</div>
</div>
<div class="m-grid-row m-grid-row-inline">
<div class="m-grid-col m-grid-inline m-grid-col3">Bourns</div>
<div class="m-grid-col m-grid-inline m-grid-col3">BI Tech</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Dale/Vishay</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Philips/Mepco</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Murata</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Panasonic</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Spectrol</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Mil Spec</div>
</div>
</div>

Answer 1

如果有人遇到这个问题，这里有两件事要说。

1. 正如已经观察到的那样，标记有些不对劲。有时，当从其他地方复制代码时，空格并不完全是空格，实际上呈现为字符。我几乎可以肯定这里就是这种情况，只是懒得复制代码片段并检查。

2. 对行元素使用font-size: 0，对列本身使用font-size: <whatever-value-should-be>可以解决此问题，而无需干预 HTML。这是有效的，因为将行上的字体大小设置为 0 会使"隐藏字符"完全消失 - 它们的字体大小为 0。然后应该在子项中恢复字体大小，因为它(即 0)是继承的。

Answer 2

有趣的是，div标签之间的空格。请参阅第一列。

.mobile-cross-reference {
border: 1px solid #2980b9;
color: #333;
}

.m-grid-scroll {
overflow-x: scroll;
}
.m-grid-header {
background-color: #2980b9;
color: white;
text-align: center;
}
.m-grid-header,
.m-grid-row {
width: 100%;
white-space:nowrap;
display:block;
}
.m-grid-header-col {
background-color: #2980b9 !important;
}
.m-grid-row-inline {
background-color: transparent;
white-space: nowrap;
}
.m-grid-col {
border-right: 1px solid #ccc;
padding:0px;
margin:0px;
}
.m-grid-col:last-child {
border-right: 0;
}
.m-grid-col3 {
width: 31%;
}
.m-grid-inline {
display: inline-block;
margin: 0;
}

<div class="mobile-cross-reference m-grid-scroll">
<div class="m-grid-header m-grid-row-inline"><div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Bourns</div><div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">BI Tech</div><div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Dale/Vishay</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Philips/Mepco</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Murata</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Panasonic</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Spectrol</div>
<div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Mil Spec</div>
</div>
<div class="m-grid-row m-grid-row-inline">
<div class="m-grid-col m-grid-inline m-grid-col3">Bourns</div>
<div class="m-grid-col m-grid-inline m-grid-col3">BI Tech</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Dale/Vishay</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Philips/Mepco</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Murata</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Panasonic</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Spectrol</div>
<div class="m-grid-col m-grid-inline m-grid-col3">Mil Spec</div>
</div>
</div>