对齐无序列表中的项目

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>

我尝试删除 li 上的 row class 但它并没有解决所有问题：

Answer 1

上边距的差异是因为您在单个 li 元素上使用 .row 并且离子框架中有 row + row CSS 改变了相邻行的边距。这些不是行，因此您应该从这些元素中删除 class。

然后要使行的元素流畅、居中且高度一致，请添加 .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>

对齐无序列表中的项目

Align items within an unordered list

html

css

ionic-framework

grid