CODEWITHSUNDEEP
htmlcssionic-frameworkgrid
Giacomo Brunetta
Giacomo Brunetta

Reputation: 1567

Align items within an unordered list

I have a problem with the alignment of items within an unordered list. The items are not perfectly aligned at the top. I have tried display: inline-block; and display:inline-block; but it wasn't successful.

Here what the alignment problem looks like: unaligned items

This is the CSS:

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

And this is the 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>

I tried removing the row class on li but it has not solved the problem everywhere: unaligned items without row class

Upvotes: 0

Views: 71

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

The difference in top margin is because you're using .row on the individual li elements and there is row + row CSS in the ionic framework that alters the margin of adjacent rows. Those aren't rows, so you should remove that class from those elements.

Then to make the elements of the rows fluid, centered, and a consistent height, add .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>

Upvotes: 1

Related Questions