Question

我正在使用angular并希望修复列表的最后<li>。我实际上在通知中心执行此操作，其中将加载所有通知并且最后一个选项是“显示所有通知”我想要修复。在这里我发布html。我使用了一些css但是没有为我工作

HTML

<ul  id="list-wrapper-noti" class="dropdown-menu dropdown-menu-right style-3" >
   <div infinite-scroll-disabled = "disableScroll" infinite-scroll='loadMoreNotifications()' infinite-scroll-distance='0' infinite-scroll-container="'#list-wrapper-noti'">
     <div ng-repeat = "notification in notifications track by $index">
        <li>
            <a style="text-decoration:none; color:#534D4D" href="{{notification.href}}" >
               <div class="media">

              <img src="https://papa.fit/routes/images/inst_logo/default.png" alt="fakeimg" class="img-circle pull-left" style="height:50px; width:50px;">

              <div class="media-body">
                 <div class="media">{{notification.employee}} {{notification.action | lowercase}} {{notification.element}} {{notification.record_value}}</div>
                  <span class="muted">{{notification.time_string}}</span>
                 </div>

              </div>
            </a>
        </li>

        <li class="divider"></li>
    </div>
  </div>
   // this li should be fix 
   <li>
     <a href="list.php?id=20" style=" color:#3C71C1;"><i class="fa fa-globe pull-right"></i>Show all notifications</a>
   </li>

</ul>

CSS

.style-3 li:last-child {
          position: fixed;
          background-color: white;
 }

Answer 1

<div>代码不是<ul>

的有效子代

将迭代器放在<ul>上，然后将“显示所有链接”移出列表。

<ul ng-repeat="notification in notifications track by $index">
    <li>...</li>
</ul>
<a href="#" class="show-all">Show all notifications</a>

这也应该让你的造型更容易。

修复列表的最后一个li

1 个答案: