Question

我正在尝试将图像列表水平。它们一直显示垂直。知道我做错了吗？

 <div ng-repeat="i in product.images">
    <ul id="navlist">
        <li>
            <img class="thumbnail" ng-src="{{i.image}}"> </img>
        </li>
    </ul>
    </div>

#navlist li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

Answer 1

您需要将'ng-repeat'放在li标签（而不是div）中，否则您将重复整个div，这不是内联的。以下是使用此代码http://codepen.io/jwncoexists/pen/XbdOVY

的CodePen链接

<body ng-app="ImageDemo">
  <div ng-controller="Demo.controller">
    <div>
      <ul id="navlist">
        <li ng-repeat="i in product.images">
          <img class="thumbnail" ng-src="{{i.image}}"> 
        </li>
      </ul>
    </div>
  </div>
</body>

Answer 2

calthoff，如果你删除ul，li并浮动图像......那么为了简单起见如何：

<div ng-repeat="i in product.images">
     <img class="thumbnail" ng-src="{{i.image}}">
</div>


img
{
    float: left;
    padding-right: 20px;
}

Answer 3

<div ng-repeat="i in product.images">
<ul id="navlist">
    <li>
        <img class="thumbnail" ng-src="{{i.image}}" />
    </li>
    <li>
        <img class="thumbnail" ng-src="{{i.image}}" />
    </li>
</ul>
</div>

＆LT; img＆gt;标签是自动关闭的，您的代码应该像这样工作。

重复水平图像

3 个答案: