how to make div that vertically stack to horizontaly stack

Question

hi currently i'm making a loader for my website when my website is still trying to get data from API.

.in-loader {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.in-loader:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
}


}
div.in-loader {
  position: fixed;
  background: white;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.in-loader div {
  width: 1rem;
  height: 1rem;
  margin: 2rem 0.3rem;
  background: #fd6a4f;
  border-radius: 50%;
  -webkit-animation: 0.9s bounce infinite alternate;
  animation: 0.9s bounce infinite alternate;
}
div.in-loader div:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
div.in-loader div:nth-child(3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
@-webkit-keyframes bounce {
  to {
    opacity: 0.3;
    transform: translate3d(0, -1rem, 0);
  }
}
@keyframes bounce {
  to {
    opacity: 0.3;
    transform: translate3d(0, -1rem, 0);
  }
}

<div class="in-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

when i run this code, it show the loader animation. but i think the div is verticaly stack. what i want is horizontaly stack. i tried `display:inline;', but it doesn't change anything. any answer would be appreciated. thank you

Does this answers your question? [https://stackoverflow.com/questions/79461/how-to-vertically-align-elements-in-a-div?rq=1](https://stackoverflow.com/questions/79461/how-to-vertically-align-elements-in-a-div?rq=1) — kunal panchal, Feb 19 '21 at 08:54

Mohd Abdul Mujib · Accepted Answer · 2021-02-19T09:04:09.557

Just tweak your CSS to the follwoing

.in-loader {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 6em; /* We make the container wider */
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

div.in-loader div {
    width: 1rem;
    height: 1rem;
    margin: 2rem 0.3rem;
    background: #fd6a4f;
    border-radius: 50%;
    -webkit-animation: 0.9s bounce infinite alternate;
    animation: 0.9s bounce infinite alternate;
    display: inline-block; /* Then we make the inner elements displayed as inline-blocks */
}

There are two aspects to make the elements cascade properly.

Available width of container
Their own display property

You were correct on the 2nd aspect but were missing the 1st one.

how to make div that vertically stack to horizontaly stack

1 Answers1