Question

我正在使用此问题Create horizontally scrolling List Item view using Bootstrap Columns中的jsfiddle / code但由于某种原因它对我不起作用，我无法找到原因。

我有一个简单的html文件

.DocumentList
{
    overflow-x:scroll;
    overflow-y:hidden;
    height:200px;
    width:100%;
    padding: 0 15px;
}

.DocumentItem
{
    border:1px solid black;
    padding:0;
    height:200px;
}

.list-inline{
  white-space:nowrap;
}

加上我的css文件

{{1}}

但只有这一点出现了：

帮助？

Answer 1

将display：inline-block添加到 .DocumentItem 将解决此问题！

border: 1px solid black;
padding: 0;
width: 500px;
display: inline-block;
height: 200px;

注意我已将 width：500px 添加到您的 DocumentItem 类中，以便您真正看到差异！

我也为你创造了一个小提琴：https://jsfiddle.net/tfdedn3y/

Answer 2

＆＃13;

.DocumentList
{
  overflow-x:scroll;
    overflow-y:hidden;
     height:200px;
    width:100%;
    padding: 0 15px;
}

.DocumentItem
{
    border:1px solid black;
    padding:0;
    height:200px;
    display:inline;
}

.list-inline{
  white-space:nowrap;
  }

＆＃13;

<!DOCTYPE html>

<html>
 <head>
  <title>this is the title</title>
   <link href="projects.css" rel="stylesheet">
 </head>
 <body>
<div class="DocumentList">
    <ul class="list-inline">
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
    </ul>
</div>

 </body>
</html>

＆＃13;

Answer 3

尝试此操作，如果将宽度100％设置为.DocumentList，则无法滚动，因为滚动工作的宽度大于100％。

.DocumentList {
   overflow-x: scroll;
   overflow-y: hidden;
   height: 200px;
   /*Width : 100%*/
   padding: 0 15px;
}

此外，您必须将.list-inline设置为grater，然后将100％宽度设置为滚动div。

.list-inline {
  white-space: nowrap;
  width: 110%; /* or width px also */
}

水平滚动不会晃动

3 个答案: