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/正如你所看到的，包装上有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/