html - 水平滚动部分可防止 css 和 html 中的换行

Question

我已经在这里看到过这个问题和类似的问题几次，但是如何防止滚动部分内 float 元素的换行。我有一个 div，我想要在其上进行水平滚动。

我知道这可以通过向每个元素添加边距或左侧值来完成，如此处所示，这似乎是解决该问题的常见方法: JSFIDDLE From this Post

如果您知道容器的宽度，这会很好地工作，因为我打算从数据库中提取这些数据，所以宽度会根据结果的数量而变化，因此它如何与自动宽度一起工作。

这是我的例子:

CSS:

.items{
    width:100%;
    overflow-x:scroll;
    overflow-y:hidden;
    background:rgba(255,255,255,.8); 
    height:350px;
    position:relative;
}
.items .scroll{
    height:100%;
    padding:0px;
    width:auto;
    position:absolute;
    white-space:nowrap;
}
.items .item{
    height:100%;
    margin-left:25px;
    margin-right:25px;
    width:150px;
    float:left;
    position:relative;
    display:inline-block;
}
.items .item a{
    padding:5px;
    background:#0e76bc;
    color:#FFF;
    text-decoration:none;
}
.items .item .img:hover{
    box-shadow:0px 0px 3px rgba(0,0,0,0.5);
    -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
}
.items .item .img{
    height:175px;
    width:100%;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
}

HTML:

<div class="items">
     <div class="scroll">
         <div class="item">
             <p class="center"><div class="img" style="background-image:url(images/sample1.jpg);"></div></p>
             <p class="title">Product Name</p>
             <p class="left"><strong>Current Bid:</strong> &pound;10.00</p>
             <p class="right"><a href="#">View Item</a></p>
         </div>
     <!-- .item  repeats a few times after a DB query, hence exact width is unknown -->
    </div>
</div>

这可以通过 javascript 中的 init() 函数来解决，但我觉得应该有一种方法可以在 css 中做到这一点。

Answer 1

尝试使用您的代码: DEMO

CSS:

.items .item{
    height:100%;
    margin-left:25px;
    margin-right:25px;
    width:150px;   
    position:relative;
    display:inline-block;
}