帶空格的內聯塊元素之間的間隙：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

有趣的是，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> 

Answer 2

如果有人遇到這個問題，這里有兩件事要說。

1. 正如已經觀察到的那樣，標記有些不足。 有時，從其他地方復制代碼時，空格並非完全是空格，而是實際上呈現為字符。 我幾乎可以肯定，這里就是這種情況，只是懶得復制片段並進行檢查。

2. 在行元素上使用font-size: 0並在列上使用font-size: <whatever-value-should-be>解決此問題，而無需干預HTML。 這行得通，因為在行上將font-size設置為0會使“隱藏的字符”完全消失-它們的字體大小為0。由於繼承了font-size（即0），因此應該在子級中將其恢復。