Displaying list elements horizontally with angular-bootstrap

Question

With reference to this link http://jsfiddle.net/jenniferperrin/9sCME/ I implemented the following in my MVC application.

<ol class="rectangle-list">
  <li ng-repeat="item in freightlist" class="info"> 
    <a href="#"> {{item.link}} </a>
  </li>
</ol>

This is working fine but if I try to place more another tag say <span> so that I can display other properties too like the following

 <a href="#">{{item.link}} </a> <span>{{item.name}}</span> <span> {{item.city}}</span>

It's not working correctly as shown in the link I mentioned above it's displaying the contents as it is line by line.

Need help to overcome this.

Answer 1

Actually, it has nothing to do with Angular or Bootstrap. The result is rendered line by line because you applied display: block to the <a> tag:

.rounded-list a {
    display: block;
    ...
}

If you removed it out, it will display side by side as you wish. Here is the result on JsFiddle.