Отображение элементов списка по горизонтали с угловым бутстрапом

Вопрос:

Со ссылкой на эту ссылку http://jsfiddle.net/jenniferperrin/9sCME/ Я применил следующее в своем приложении MVC.

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

Это работает нормально, но если я попытаюсь разместить еще один тег, скажите <span> чтобы я мог отображать другие свойства, также как и следующие

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

Он работает некорректно, как показано в ссылке, о которой я упоминал выше, и отображая содержимое, поскольку оно является строковым.

Нужна помощь, чтобы преодолеть это.

Лучший ответ:

На самом деле, это не имеет ничего общего с Angular или Bootstrap. Результат визуализируется по строкам, потому что вы применили display: block к тегу <a>:

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

Если вы удалите его, он будет отображаться бок о бок, как вы пожелаете. Вот результат на JsFiddle.