Issue
I am trying to align div left and right properly but it is not working properly.I am expecting what is their in the image below. How to achieve this.
.main {
display: flex;
width: 100%;
}
.div1 {
float: left;
}
.div2 {
float: left;
}
.div3 ul>li {
display: inline-block;
}
li:first-child {
border-right: 1px solid #ccc;
}
.btns {
display: flex;
}
.div4 {
float: right;
}
<div class="main">
<div class="div1">
Heading Heading Heading
</div>
<div class="div2">
<div class="div3">
<ul>
<li> car </li>
<li> bus </li>
</ul>
<div class="btns">
<button>One</button>
<button>Two</button>
</div>
</div>
<div class="div4">
<div class="btns">
<button>One</button>
<button>Two</button>
</div>
</div>
</div>
</div>
Expecting like below:
Demo: https://stackblitz.com/edit/angular-checkbox-custom-value-nithd8?file=src%2Fapp%2Fapp.component.html
Solution
Try this:
.main {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.div2,
.div3,
.div4 {
display: flex;
flex-direction: row;
align-items: center;
}
.div3 ul > li {
display: inline-block;
}
li:first-child {
border-right: 1px solid #ccc;
}
.btns {
display: inline-block;
}
Just in case, if you want, you can practice the flexbox here
Answered By - rna
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.