Align items within an unordered list

Issue

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

Solution

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>

Answered By – Michael Coker

Leave a Comment