CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
Billy Logan
Billy Logan

Reputation: 2520

How to place several elements in one row when using a list?

I need to create a content block which has to contain three events on each row.

I'm using Angularjs along with Bootstrap, so I designed my code as a list that starts from the main container of events class="events"

<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>

The point is there can be loaded unlimited numbers of these events, hence my question is how to write css so the list can correctly display three events in one row?

Upvotes: 0

Views: 61

Answers (2)

sch
sch

Reputation: 1388

I can't remake your code since I don't know what your 'events' are, but I did it like this:

in html:

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

In controller (this is ofc just something I did to have data):

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

This created what I think is the desired effect, three objects on each row, two rows in this case.

Let me know if I should elaborate, or anything

Upvotes: 2

Sidius
Sidius

Reputation: 414

The css code would be like this:

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

The trick to show 3 per row, would be to put them inside a container div, which has a resolution wide enough for 3. If your block is say 180px wide then you need a 3 * 180px +margins/paddings box.

Upvotes: 1

Related Questions