水平滚动问题-HTML

问题描述 投票：2回答：3

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

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

但仅显示此内容：

enter image description here

html css horizontal-scrolling
3个回答
1
投票

将显示：内联块添加到。DocumentItem将解决此问题！

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

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

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

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>
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 */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.