I want align items with equal spacing and with different parents and without adding any width to those items. I tried below code but not working. Please help me to on this.
<div class="container">
<div class="buttons">
<button>test</button>
<button>test</button>
<button>test</button>
<button>test</button>
</div>
<button class="outer">test</button>
</div>
.container{
display:flex;
width:100%
}
.buttons{
display: flex;
width: 75%;
justify-content: space-between;
}
.outer{
margin-left:auto
}
Link for my code https://jsfiddle.net/f74ayxh9/
I want result like this with equal spacing and margin but with my HTML structure.
Thank you
You can do this with display: contents
on the button container element.
.container {
display: flex;
justify-content: space-between;
outline: 1px solid red;
margin: 2em;
}
.buttons {
display: contents;
}
<div class="container">
<div class="buttons">
<button>
test
</button>
<button>
test
</button>
<button>
test
</button>
<button>
test
</button>
</div>
<button class="outer">
test
</button>
</div>