横スクロールせずに

私はこの質問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; 
}

を持っていますが、これだけが現れる：

助けを？

出典

2016-08-31 teresawithoutah

表示を追加：インラインブロックを.DocumentItemに追加すると、この問題が解決されます。

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

私は幅追加しました注：あなたが本当に違いを見ることができるようにあなたのDocumentItemクラスに500pxなどを！

また、私はあなたのためのフィドル作成しました：https://jsfiddle.net/tfdedn3y/

出典

2016-08-31 04:09:59 James111

大変ありがとうございました！ – teresawithoutah

@teresawithoutah心配しないで！もしあなたが好きなら、あなたはそれを受け入れることができます：D – James111

2分以上待たなければなりません。 – teresawithoutah

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

出典

2016-08-31 04:13:08 Gowtham

をスクロールするので、それはスクロールすることはできませんので、あなたが.DocumentListに幅を100％に設定した場合、これを試してみてください100％幅以上で作業してください。

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

そしてまた、あなたはdiv要素をスクロールする後、100％の幅をおろし金するの.list-インラインを設定する必要があります。

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

出典

2016-08-31 04:13:24

答えて

関連する問題