Achieving vertical structure from horizontally placed divs - html

Question

I have a list of div elements that act as buttons. They have hover functionality from its CSS. I am placing them all in horizontal line. But I want them to be placed vertically that is one after another in the same line. I am not sure how I can do it since the width attribute places it in the same line.
How do I place them as new line function with certain equal distance?
body {
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
}
h1 {
color: #333;
font-weight: 700;
margin-top: 125px;
text-align: center;
text-transform: uppercase;
letter-spacing: 4px;
line-height: 23px;
}
/* --- Start progress bar --- */
.process-wrapper {
margin: auto;
max-width: 1080px;
}
#progress-bar-container {
position: relative;
width: 90%;
margin: auto;
height: 100px;
margin-top: 65px;
}
#progress-bar-container ul {
padding: 0;
margin: 0;
padding-top: 15px;
z-index: 9999;
position: absolute;
width: 100%;
margin-top: -40px
}
#progress-bar-container li:before {
content: " ";
display: block;
margin: auto;
width: 30px;
height: 30px;
border-radius: 50%;
border: solid 2px #aaa;
transition: all ease 0.3s;
}
#progress-bar-container li.active:before,
#progress-bar-container li:hover:before {
border: solid 2px #fff;
background: linear-gradient(to right, #1a00aa 0%, rgb(0, 81, 255) 100%);
}
#progress-bar-container li {
list-style: none;
float: left;
width: 20%;
text-align: center;
color: #aaa;
text-transform: uppercase;
font-size: 11px;
cursor: pointer;
font-weight: 700;
transition: all ease 0.2s;
vertical-align: bottom;
height: 60px;
position: relative;
}
#progress-bar-container li .step-inner {
position: absolute;
width: 100%;
bottom: 0;
font-size: 14px;
}
#progress-bar-container li.active,
#progress-bar-container li:hover {
color: #444;
}
#progress-bar-container li:after {
content: " ";
display: block;
width: 6px;
height: 6px;
background: #777;
margin: auto;
border: solid 7px #fff;
border-radius: 50%;
margin-top: 40px;
box-shadow: 0 2px 13px -1px rgba(0, 0, 0, 0.3);
transition: all ease 0.2s;
}
#progress-bar-container li:hover:after {
background: #555;
}
#progress-bar-container li.active:after {
background: #207893;
}
<div class="process-wrapper">
<div id="progress-bar-container">
<ul>
<li class="step step01 active">
<div class="step-inner">A</div>
</li>
<li class="step step02">
<div class="step-inner">B</div>
</li>
<li class="step step03">
<div class="step-inner">C</div>
</li>
<li class="step step04">
<div class="step-inner">D</div>
</li>
<li class="step step05">
<div class="step-inner">E</div>
</li>
</ul>
</div>
</div>

Answer 1

Just add flex and flex-direction as column to the ul tag.
#progress-bar-container ul{
display:flex;
flex-direction:column;
padding: 0;
margin: 0;
padding-top: 15px;
z-index: 9999;
position: absolute;
width: 100%;
margin-top: -40px
}
For more information just look at this link
https://css-tricks.com/snippets/css/a-guide-to-flexbox/