水平滚动不起作用

Question

我正在使用这个问题 Create horizontally scrolling List Item view using Bootstrap Columns 中的 jsfiddle/code，但由于某些原因它对我不起作用，我也不知道为什么。

我有一个简单的 html 文件

<!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>

加上我的 css 文件

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

但只有这个显示：

帮助？

Answer 1

添加 display: inline-block 到 .DocumentItem 将解决这个问题！

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

请注意，我已将 width: 500px 添加到您的 DocumentItem class 所以你真的可以看到差异！

我还为您创建了一个 fiddle：https://jsfiddle.net/tfdedn3y/

Answer 2

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

<!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>

Answer 3

Try this, if You set width 100% to .DocumentList so it can't scroll because scroll work with greater then 100% width.

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

而且您还必须将 .list-inline 设置为大于 100% 的宽度才能滚动 div。

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

水平滚动不起作用

Horizontal scrolling not wroking

html

css

horizontal-scrolling