使用angular-bootstrap水平显示列表元素

Question

参考此链接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>

它没有正常工作，如我上面提到的链接所示，它显示内容，因为它是逐行的。

需要帮助才能克服这个问题。

Answer 1

实际上，它与Angular或Bootstrap无关。结果会逐行呈现，因为您已将display: block应用于<a>标记：

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

如果将其删除，它将根据您的意愿并排显示。这是result on JsFiddle。