Question

我试图让class=unit-media的分区通过让它的父overflow-x:scroll显示在一行而不是在任何地方显示，这是代码小提琴：http://jsfiddle.net/SH2EM/任何帮助都是非常感谢，谢谢！

这是代码： http://jsfiddle.net/SH2EM/1/

CSS

.media {
    width:auto;
    height:125px;
    background-color:#BBC;
    overflow-x:scroll;
    overflow-y:hidden;
    padding:15px;
    white-space: nowrap;
}
.unit-media {
    display:inline;  /*Not working*/
    float:left;
    width:100px;
    height:120px;
    border:1px solid #CCC;
}

Answer 1

如果您希望它起作用，则不应浮动元素 - 因此请删除float:left。此外，display值应为inline-block，而不是inline。

Updated Example

.media-upload {
    height:125px;
    background-color:#BBC;
    overflow-x:scroll;
    overflow-y:hidden;
    padding:15px;
    white-space: nowrap;
}
.unit-media {
    display:inline-block;
    width:100px;
    height:120px;
    border:1px solid #CCC;
}

要解决有关元素之间空间的其他问题，请参阅this answer。简而言之，inline元素尊重标记中的空格。您可以简单地删除空格以解决问题。

显示：内联无法正常工作？

1 个答案: