html - ng-重复水平图像

标签 html css angularjs

我正在尝试制作水平图像列表。他们一直显示垂直。知道我做错了什么吗?

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

最佳答案

您需要将“ng-repeat”放在 li 标签中(而不是 div),否则您将重复整个 div,这不是内联的。这是使用此代码的 CodePen 链接 http://codepen.io/jwncoexists/pen/XbdOVY

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

关于html - ng-重复水平图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30250619/

相关文章:

jQuery .offset 设置y值

javascript - Protractor 和 Karma 可以一起使用吗?

Javascript 写在 <p> 里面

php - 在 html 输入值中获取 php date() 会破坏它

CSS - 当内容超出宽度/高度参数时启用绝对定位 DIV 的 "auto expand"

jquery - 通过提供 url 更改页面背景 - jquery

angularjs - 获取全日历事件的 html 元素

javascript - 无法在 AngularJS 中注册模块

jquery - 无法将 div 表中的单元格保持在 50%

javascript - Prestashop 1.6.1.16 - 我的 js 文件已加载,但没有看到我的函数