Question

我需要创建一个内容块，每行必须包含三个事件。

我使用Angularjs和Bootstrap，所以我将我的代码设计为一个列表，从事件的主要容器开始 class =＆＃34; events＆＃34;

<ul class="events">

  <li class="event" ng-repeat="event in events">
    <ng-include src="'/assets/angular/events/particular_event.html'" class="ng-scope">
    </ng-include>
  </li>

  <li class="event" ng-repeat="event in events">
  ...
  <li>

  <li class="event" ng-repeat="event in events">
  ...
  <li>

  <li class="event" ng-repeat="event in events">
  ...
  <li>

</ul>

关键是可以加载无限数量的这些事件，因此我的问题是如何编写css以便列表可以在一行中正确显示三个事件？

Answer 1

我无法重新编写您的代码，因为我不知道您的事件是什么＆＃39;是的，但我是这样做的：

in html：

        <div class="col-md-4" ng-repeat="event in events">
                <p>{{event}}</p>
        </div>

在控制器中（这只是我用来获取数据的东西）：

$scope.events = ['event1','event2','event3','event4','event5','event6'];

这创造了我认为理想的效果，每行有三个对象，在这种情况下是两行。

让我知道我是否应该详细说明，或任何

Answer 2

css代码如下：

 ul.events li.event{
   display:inline;
 }

每行显示3个的技巧是将它们放在容器div中，容器div的分辨率足够宽3。如果你的块是180px宽，那么你需要一个3 * 180px +边距/填充框。

使用列表时如何将多个元素放在一行中？

2 个答案: