logo标签列表

水平滚动不起作用

htmlcsshorizontal-scrolling
3
我正在使用这个问题中的jsfiddle/code （使用Bootstrap列创建水平滚动列表项视图），但出现了问题，我无法找出原因。

我有一个简单的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;
}

但只有这个出现了：

输入图像描述

需要帮忙吗？

3个回答
1

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

1
将display: inline-block添加到.DocumentItem中的将解决此问题！ 
border: 1px solid black;
padding: 0;
width: 500px;
display: inline-block;
height: 200px;

注意，我已经在你的DocumentItem类中添加了width: 500px，这样你就可以真正看到差异了！
我还为您创建了一个fiddle：https://jsfiddle.net/tfdedn3y/
1
@teresawithoutah 没问题！如果你愿意的话，你可以接受它 :D - James111
1
还要等两分钟，别担心，我会帮你的。 - teresawithoutah
0
试试这个，如果您将.DocumentList的宽度设置为100％，它就无法滚动，因为滚动需要大于100％的宽度。
.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 */
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接