Question

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

我知道这可以通过在每个项目中添加边距或左侧值来完成，如此处所示，这似乎是问题的常见修复： JSFIDDLE From this Post

如果您知道容器的宽度，这将很有效，当我打算从数据库中提取此数据时，它将如何使用宽度auto，因此宽度将根据结果的数量而变化。

继承我的榜样：

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;
}

Answer 2

只需离开float:left; .items .item，它似乎就像被问到的那样：

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

水平滚动部分，以防止css和html中的换行符

2 个答案: