Question

我尝试使用angular来创建元素列表。该页面将成为手机上的应用程序。列表本身可以有很多元素，所以我期望ul元素应该是可滚动的（＆＃34;可转换＆＃34;？）。我试图效仿http://jsfiddle.net/sirrocco/9z48t/和http://jsfiddle.net/qcv5Q/1/ ..

等示例

这是html代码：

<div class="container">
    <div id="spinner-icon" style="display:none">
        <span class = "icon-spinner"></span>
    </div>
    <div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
        <div class="clearfix">
            <div class="pull-left">
                <h4>{{cei.description}}</h4>
                <p>{{cei.name}}</p>
            </div>
        </div>

        <div class="log-widget-list">
            <ul class="list scroller clearfix" id="elements-list">
                <li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
                    <h4 class="align-center">{{tinfo.elementShortCode}}</h4>
                    <div class="clearfix">
                        <span class="icon-clock pull-left"></span>
                        <span class="pull-right"> {{tinfo.sentTime}}min</span>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</div>

这是css代码：

.list {
  margin: 0;
  padding: 0;
}

.log-widget-list {
    height:100px;
    width: 720px;
    overflow: hidden;
}

.log-widget-list .scroller{
    overflow-x: scroll;
    list-style-type: none;
    width: 1500px; /* combined width of all LI's */
}

#elements-list li {
  width: 100px;
  list-style: none;
  box-sizing: border-box;
  border-top: none!important;
  background-color: #0accf8;
  padding: 4px;
}

#elements-list li:not(:last-of-type) {
  border-right: 3px solid #ffffff;
}

#elements-list [class^="icon-"], #elements-list [class*=" icon-"] {
  margin-top: 4px;
  font-size: 12px;
}

现在的问题是，我不希望水平滚动条出现，但它出现了，我不明白为什么......有什么想法吗？

Answer 1

<强>样本

http://jsfiddle.net/FTUrF/6/

在这里更改了一些CSS：

 .log-widget-list {
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    overflow: hidden;
}
.log-widget-list .scroller {
    width: 215px;
    height: 300px;
    overflow: scroll;
    padding-bottom: 15px;
    list-style-type: none;
}

在height和padding-bottom中.scroller添加了border和.log-widget-list

并添加了更多这些：

<span class="pull-right"> {{tinfo.sentTime}}min</span>

Answer 2

在overflow:hidden css。

中添加#wrapper

CSS：

#wrapper {
 background: transparent;
 width: 550px;
 color: white;
 height:100%;
 overflow:hidden;
}

演示：http://jsfiddle.net/lotusgodkk/9z48t/5/

不带滚动条的可滚动ul元素

2 个答案: