在 X asys 中用滚动条在一行中显示 HTML 表格

Question

我需要显示表格列表(atm 表格是 ul 列表)，如果包装器中没有足够的空间 - 应该会出现 asys X 上的滚动条。我知道这是纯 css，但我无法找出为什么元素不适合时会移到底部......

我现在拥有的:

    .blocks_wrapper .categories_table_wrapper{
    margin-top: 14px;
    width: 954px;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 0;
    height: 211px;
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
}
.blocks_wrapper .categories_table_wrapper .categories_table{
    padding: 0;
    margin-right: 18px;
    width: 300px;
    min-height: 192px;
    max-height: 192px;
    display: inline-block;
    list-style: none;
    overflow-y: scroll;
}
.blocks_wrapper .categories_table_wrapper .categories_table li{
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: #757575;
    cursor: pointer;
    padding-left: 40px;
    background-color: #eaeaea;
    position: relative;
}
.blocks_wrapper .categories_table_wrapper .categories_table li:after{
    position: absolute;
    content: '';
    width: 9px;
    height: 24px;
    background-image: url('../images/icons/cat_ticker.png');
    background-repeat: no-repeat;
    top: 0;
    right: 10px;
}
.blocks_wrapper .categories_table_wrapper .categories_table li:nth-child(odd){
    background-color: #f6f6f6;
}
.categories_table_wrapper .categories_table li.active, .categories_table_wrapper .categories_table li:hover{ background-color: #ffffff!important; }

http://jsfiddle.net/tp1qsg54/正如您所看到的， wrapper 上有 3 个表格，第三个表格应该在同一行中的第二个表格旁边，但现在它位于底部(第二个表格之后)...如何修复它？

Answer 1

发生这种情况是因为 ul 元素被设置为 inline-block，并且 inline-block/inline 元素尊重空格，包括换行符。因此，在您的情况下，由于额外的空格宽度，三个表不适合该行。

简单的解决方法是在父容器上将字体大小设置为 0，这样空白就可以有效地呈现为零大小。只是不要忘记之后在表格级别将字体大小重置为适当的值:

.blocks_wrapper .categories_table_wrapper{
    /* ... */
    font-size: 0; /* <--- this line does the trick */
}

演示: http://jsfiddle.net/tp1qsg54/1/