如何使内容类型的帖子水平滚动?

时间:2013-05-16 14:00:05

标签: css

我正在尝试在x轴而不是y轴上制作内容类型(application_formulier)scrollabel的预告片视图。我为此做了一个观点(view-view-s4p)。

使用CSS我得到以下内容:

.view-view-s4p{
margin-left:-50px;
max-width:920px;
min-width:920px;
height:260px;
overflow:auto;
overflow-y:hidden;
}
.view-view-s4p .view-content {
margin:0 -32767px 0 0;/* browser limit */
height:240px;
}
.view-view-s4p .view-row{
float:left;
}

我现在有滚动工作,但它已经超过了最后一篇文章......任何关于如何解决这个问题的想法。

转到此链接可查看我的问题图片: https://www.dropbox.com/s/7sse3shk08ex9g6/problem.PNG

(顺便说一句:如果我不允许改变我的问题,请告诉我。)

2 个答案:

答案 0 :(得分:0)

您需要将white-space:nowrap;属性添加到样式表中:

.view-view-s4p{
  margin-left:-50px;
  width:auto;
  min-width:960px;
  max-height:253px;
  overflow-y:hidden;
  overflow-x:scroll;
  white-space:nowrap;
}

Demo

答案 1 :(得分:0)

以下是您如何做到这一点的示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.wrap {
    overflow:auto;
    width:600px;
    height:220px;
    padding:10px;
}
.inner {
    float:left;
    margin:0 -32767px 0 0;/* browser limit */
}
.inner div {
    width:200px;
    height:200px;
    margin:0 10px;
    background:red;
    float:left;
}
</style>
</head>
<body>
<div class="wrap">
        <div class="inner">
                <div>test</div>
                <div>test</div>
                <div>test</div>
                <div>test</div>
                <div>test</div>
                <div>test</div>
        </div>
</div>
</body>
</html>

Source