的CSS <ul><li> ：項目對齊

Question

我在中的項目對齊有問題

。 這就是問題：

項目在頂部的排列不完全，我不明白原因。 我想以居中的方式列出此項目，我剛剛嘗試過： display: inline-block; display:inline-block; 但這不起作用。

這是我的CSS：

  .licatalog li { cursor: pointer; text-align: center; background-color: aliceblue; width: 200px; min-height: 250px; border: 1px solid #3F3075; display: inline-block; } 

這是html文件：

 <ion-view view-title="Search"> <ion-content class="ioncontentcatalog"> <h2 class="sub-header" style="color:#4e67c3;">Catalogo prodotti</h2> <ul class = "licatalog"> <li class = "row responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style = "color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style = "color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class = "imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> </ul> </ion-content> </ion-view> 

PS：我刪除了li中的“ row”，但並不是到處都解決了，也許是為了長標題：

Answer 1

上邊距的差異是因為您在單個li元素上使用.row ，並且離子框架中有row + row CSS會改變相鄰行的邊距。 這些不是行，因此您應該從那些元素中刪除該類。

然后，要使行中的元素流暢，居中且高度一致，請添加.licatalog { display: flex; flex-wrap: wrap; justify-content: center; } .licatalog { display: flex; flex-wrap: wrap; justify-content: center; }

 .licatalog { display: flex; flex-wrap: wrap; justify-content: center; } .licatalog li { cursor: pointer; text-align: center; background-color: aliceblue; width: 200px; min-height: 250px; border: 1px solid #3F3075; display: inline-block; } body,html { overflow: auto!important; } 

 <link href="http://code.ionicframework.com/1.3.3/css/ionic.css" rel="stylesheet"/> <ul class="licatalog"> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description description description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} </h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> <li class="responsive-sm" ng-repeat="productdesc in productdescs"> <h4 style="color:#4e67c3;"> {{ productdesc.description }} productdesc productdesc</h4> <h4 style="color:#FF2E24;"> {{ productdesc.producer.name }} </h4> <h4> [sconto per utenti registrati] </h4> <h4> € {{ productdesc.price }} </h4> <img class="imgcatalog" src="../img/product/{{ productdesc.rootImage }}" height="130" width="100"> </li> </ul>