我已经使用ng重复来显示图像，我希望它们与我在div项目中使用的所有其他所有东西在行内联结。
问题是，无论我做什么，都不能内联显示。
项目具有显示块属性。
这是简单的结局html文件。
<!doctype html>
<html ng-app="countryApp">
<head>
<script
src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular.min.js">
</script>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('countries.json').success(function(data) {
$scope.countries = data;
});
});
</script>
</head>
<body>
<div ng-controller="CountryCtrl" >
<div class="item">
<div ng-repeat="country in countries" class="w3l-movie-gride-agile w3l-movie-gride-agile1 owl-item">
<a href="single.php?myNumber={{country.vid}}" class="hvr-shutter-out-horizontal"><img ng-src="thumbnail/{{country.flagURL}}" title="album-name" class="img-responsive" alt=" ">
<div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
</a>
<div class="mid-1 agileits_w3layouts_mid_1_home">
<div class="w3l-movie-text">
<h6><a href="single.html">Citizen Soldier</a></h6>
</div>
<div class="mid-2 agile_mid_2_home">
<p>2016</p>
<div class="block-stars">
<ul class="w3l-ratings">
<li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-star-half-o" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="ribben">
<p>NEW</p>
</div>
</div>
</div>
</div>
最佳答案
放在ng-repeat上的元素也是重复的。因此，每次迭代都包装在常规<div>中。因此，除非您具有适用于所有<div>元素的全局样式，否则它不会内联。
要解决此问题，您基本上只需将ng-repeat指令下移一个级别。像这样：
<div class="item">
<div ng-repeat="country in countries"
class="w3l-movie-gride-agile w3l-movie-gride-agile1">
// ... rest of content
</div>
</div>
我认为应该这样做。
关于javascript - 图像在ng-repeat中水平对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48238012/