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，并且内联块/内联元素尊重包含换行符的空格。因此，在您的情况下，由于额外的空格宽度，三个表格不适合该行。

简单修复是在父容器上将字体大小设置为0，以便有效地将空格呈现为零大小。不要忘记之后在表级别将字体大小重置为正确的值：

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

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

使用X asys中的滚动条将HTML显示在一行中

1 个答案: