CSS直列表增加了底部页边

Question

我有一个包含在形如x表除法：

<div class="container"> 
    <table>....</table> 
    <table>....</table> 
    <table>....</table> 
    <table>....</table> 
</div> 

对应于此的CSS代码是：

.container{ 
    width: 100%; 
    clear: both; 
    border-bottom: solid 2px #036; 
    white-space: nowrap; 
} 

table{ 
    display: inline-table; 
    border-bottom: solid 1px #000; 
} 

然而，当应用这个，从表格的下边界和分隔符的下边界之间有〜12px的间隙。如果我设置“margin-bottom：-12px;”在桌子上它纠正定位错误，但不是在所有浏览器中。

有谁知道为什么会有保证金？

Answer 1

display: inline-table似乎有问题，当你用float: left代替这个问题时，问题就消失了。我还在.container div上设置了overflow: hidden，因此它需要浮动表格的全部高度。

编辑：为了防止表包装，你可以把表放置在另一个左浮动div中，其中设置了white-space: nowrap;。

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
.container { 
    overflow: hidden; 
    border-bottom: solid 2px #036; 
} 
.nowrap { 
    float: left; 
    overflow: hidden; 
    white-space: nowrap; 
} 
table { 
    float: left; 
    border-bottom: solid 1px #000; 
    border-spacing: 0px; 
    padding: 0px; 
} 

HTML

<div class="container"> 
    <div class="nowrap"> 
    <table><tbody><tr><td>test test test test test</td></tr></tbody></table> 
    <table><tbody><tr><td>test test test test test</td></tr></tbody></table> 
    <table><tbody><tr><td>test test test test test</td></tr></tbody></table> 
    <table><tbody><tr><td>test test test test test</td></tr></tbody></table> 
    </div> 
</div> 
Test<br />​ 

看到这个更新JSFiddle

Answer 2

您是否需要使用<table>？我强烈建议您使用<div>来代替。 但是在表格中（可能你应该在你的CSS中添加td）将边框设置为0.这应该有所帮助。