Home Images align horizontal in ng-repeat
Reply: 0

Images align horizontal in ng-repeat

user3174
1#
user3174 Published in April 24, 2018, 8:31 am

i have use ng repeat to show images and i want them to be in inline formate with rest of all other things i have use in div item. problem is that what ever i do its not showing in inline.

Item have display block property. here is the simple and finale html file.

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

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.301281 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO