Question

我对

中的项目对齐有疑问。这就是问题：

项目在顶部没有完全对齐，我不明白原因。我希望这个项目列表是居中的，我刚刚尝试过：display: inline-block; display:inline-block;但它不起作用。

这是我的css：

＆＃13;

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

＆＃13;

这是html文件：

＆＃13;

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

＆＃13;

PS：我删除了＆＃34; row＆＃34;在李，但它无处可寻，可能是长标题：

Answer 1

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

然后，为了使行的元素流畅，居中并保持一致的高度，添加.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>

css <ul> <li>：项目的对齐方式

1 个答案: