溢出仅适用于项目符号,不适用于li的内容

时间:2015-08-20 14:22:33

标签: html css

我有以下问题。我有一个指令(aDirective)可以创建elementA(带有一些文字的正方形),而我要做的是在另一个elementsA中添加componentB (按一个按钮)。当elementsA的数量太大时,我也想要滚动。

.scrollBox{
    height: 430px;
    width: 415px;
    overflow: auto;
}


<ul class="scrollBox">
   <li ng-repeat="i in array" aDirective></li>
</ul>

滚动部分无法正常工作。当我添加特定数量的elementsA时,会出现滚动条,但它只隐藏项目符号,而不是带有文本的方框。

感谢。

1 个答案:

答案 0 :(得分:1)

如果你试图滚动li而不是ul,你应该将溢出应用到那个。

.scrollBox li {
  height: 3em;
  overflow-Y: auto;
}
<ul class="scrollBox">
  <li ng-repeat="i in array" aDirective>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
  <li ng-repeat="i in array" aDirective>lorem ipsum</li>
</ul>