我想在水平滚动的div中显示许多记录。我正在使用Twitter Bootstrap,并设置了一个div行,每个数据记录均表示为一列。
如果我需要为此部分转储Bootstrap网格,那很好,我怀疑它不是按照设计的方式真正使用它…如果我不打算将Twitter Bootstrap用于此部分,那么我的问题几乎与[防止浮动div换行。该问题的可接受答案的问题在于,它假定您可以计算容器的总宽度。在我的情况下,div项的数量是动态的。
我正在寻找纯CSS / HTML解决方案。如果需要Javascript,我将使用没有jQuery的AngularJS。
CSS
.DocumentList { overflow-x:scroll; overflow-y:hidden; height:200px; width:100%; padding: 0 15px; } .DocumentItem { border:1px solid black; padding:0; height:200px; }
HTML
<div class="DocumentList"> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem"> Record 12345 <br/> More data <br /> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem"> Record 12345 <br/> More data <br /> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem"> Record 12345 <br/> More data <br /> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem"> Record 12345 <br/> More data <br /> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem"> Record 12345 <br/> More data <br /> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem"> Record 12345 <br/> More data <br /> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem"> Record 12345 <br/> More data <br /> </div> </div> </div>
从小提琴中可以看到,仅显示前4条记录。由于CSS浮动(我假设),滚动条不会激活,其他记录也不会显示。如果我不隐藏溢出-y,则可以向下滚动并查看隐藏的记录,但这不是我想要的。
我设法使用 几乎所有的 Twitter Bootstrap 使其工作:
我在list-inline类中使用了无序列表。默认情况下,当到达容器边缘时,它仍然会自动换行,因此我对list-inline类进行了调整。
.list-inline { white-space:nowrap; } <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>