Html 重复水平图像_Html_Css_Angularjs

Html 重复水平图像

html css angularjs

Html 重复水平图像,html,css,angularjs,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>

我试着把图片列成水平的。它们一直垂直显示。知道我做错了什么吗

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






#李海军
{
显示：内联；
列表样式类型：无；
右边填充：20px；
}

标记是自动关闭的，您的代码应该是这样工作的。

calthoff，如果您删除ul、li并浮动图像……那么为了简单起见，这样如何：

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


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


img
{
浮动：左；
右边填充：20px；
}

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

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


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


img
{
浮动：左；
右边填充：20px；
}

您需要将“ng repeat”放在li标记中（而不是div），否则您将重复整个div，而该div不是内联的。这里有一个使用此代码的代码笔链接

真奇怪。css看起来会使它们水平。您可以创建一个JSFIDLE来展示它吗？否则我觉得不错。你的

ng repeat

不应该在

ul

里面吗？那太奇怪了。css看起来会使它们水平。您可以创建一个JSFIDLE来展示它吗？否则对我来说很好。你的

ng repeat

不应该在

ul

内吗？哦，对了，img标签上的呼叫很好。它是水平的，但不是我想要的，因为我不知道有多少图像会提前，所以我不想提前做

标记。用一组

标签就能让图像水平吗？是的，在Jennifer answer和我的答案之间，你应该在img标签上找到正确的答案。它是水平的，但不是我想要的，因为我不知道有多少图像会提前，所以我不想提前做

标记。用一组

标签就能让图像水平吗？是的，在Jennifer和我的答案之间，你应该有它

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