CSS aling items in the same row [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
I'm trying to aling items in the same row.
I would to obtain the button in the center and the legend in the right part ( near the end of the page)
.legendContainer {
// padding: 10px
// display: flex;
align-content: flex-end;
justify-content: flex-end;
// margin-left: 10px;
}
.legend {
list-style: none;
}
.legend li {
float: left;
margin-right: 10px;
}
.legend span {
border: 1px solid #ccc;
float: left;
width: 12px;
height: 12px;
margin: 2px;
margin-right: 5px;
}
.legendTitle {
font-weight: bold;
}
.legend .KO {
background-color: #FFA8A8;
}
.legend .aOK {
background-color: #B6FFCE;
}
.legend .send {
background-color: #F6FFA4;
}
<div class="row justify-content-center ">
<div class="col-md-4"></div>
<div class="col-md-4" style="padding-left: 70px;">
<button>Offers</button>
<button>Opportunity</button>
</div>
<div class="col-md-4" style="padding-left: 140px">
<div class="legendContainer" *ngIf="tableOffer">
<ul class="legend">
<div class="legendTitle">Legend</div>
<li><span class="KO"></span> KO</li><br>
<li><span class="Send"></span>Send</li><br>
<li><span class="OK"></span> OK</li>
</ul>
</div>
</div>
</div>
I have tried using padding but on mobile device it isn't look good.

Answer 1

Something like this?
Removed the big style paddings: style="padding-left: 70px;", style="padding-left: 140px" from the divs. div.row first child and .legendcontainer with width: fit-content; to fit their content and margin-left: auto, (.ms-auto) so they move to the end. Changed the .col of the buttons div to col-8 (60% big) and the legend container to col-4 (40% big). Bootstrap max col size (and default if its not defined) is 12 (8+4).
.legendContainer {
width: fit-content;
margin-left: auto;
}
.legend {
list-style: none;
margin: 0;
}
.legend li {
float: left;
}
.legend span {
border: 1px solid #ccc;
float: left;
width: 12px;
height: 12px;
margin: 2px;
margin-right: 5px;
}
.legendTitle {
font-weight: bold;
}
.legend .KO {
background-color: #FFA8A8;
}
.legend .aOK {
background-color: #B6FFCE;
}
.legend .send {
background-color: #F6FFA4;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row flex-row justify-content-center w-100 align-items-center">
<div class="col-8 ms-auto p-0" style="width:fit-content;">
<button>Offers</button>
<button>Opportunity</button>
</div>
<div class="col-4">
<div class="legendContainer" *ngIf="tableOffer">
<ul class="legend">
<div class="legendTitle">Legend</div>
<li><span class="KO"></span> KO</li><br>
<li><span class="Send"></span>Send</li><br>
<li><span class="OK"></span> OK</li>
</ul>
</div>
</div>
</div>

Answer 2

Buttons in the center. And the legend on the right.
.btns {
text-align: center;
}
.legendContainer {
/*padding: 10px*/
display: flex;
align-content: center;
justify-content: flex-end;;
/*margin-left: 10px;*/
xbackground: gray;
}
.legendContainer ul {
margin-top: 2px;
}
.legend {
list-style: none;
}
.legend li {
float: left;
margin-right: 10px;
}
.legend span {
border: 1px solid #ccc;
float: left;
width: 12px;
height: 12px;
margin: 2px;
margin-right: 5px;
}
.legendTitle {
font-weight: bold;
}
.legend .KO {
background-color: #FFA8A8;
}
.legend .aOK {
background-color: #B6FFCE;
}
.legend .send {
background-color: #F6FFA4;
}
<div class="row justify-content-center ">
<div class="col-md-4"></div>
<div class="col-md-4 btns" style="">
<button>Offers</button>
<button>Opportunity</button>
</div>
<div class="col-md-4" style="padding-left: 140px">
<div class="legendContainer" *ngIf="tableOffer">
<ul class="legend">
<div class="legendTitle">Legend</div>
<li><span class="KO"></span> KO</li><br>
<li><span class="Send"></span>Send</li><br>
<li><span class="OK"></span> OK</li>
</ul>
</div>
</div>
</div>

Answer 3

legend to display: inline;, or float the li left or right. Additionally, you can also use display:flex; on the ul
.legendContainer {
}
.legend {
display: flex;
justify-content:space-around;
list-style-type:none;
float: left;
}
.legend li {
/* float: left; */
margin-right: 10px;
}
.legend span {
border: 1px solid #ccc;
float: left;
width: 12px;
height: 12px;
margin: 2px;
margin-right: 5px;
}
.legendTitle {
font-weight: bold;
}
.legend .KO {
background-color: #FFA8A8;
}
.legend .aOK {
background-color: #B6FFCE;
}
.legend .send {
background-color: #F6FFA4;
}
<div class="row justify-content-center ">
<div class="col-md-4"></div>
<div class="col-md-4" style="padding-left: 70px;">
<button>Offers</button>
<button>Opportunity</button>
</div>
<div class="col-md-4" style="padding-left: 140px">
<div class="legendContainer" *ngIf="tableOffer">
<ul class="legend">
<div class="legendTitle">Legend</div>
<li><span class="KO"></span> KO</li><br>
<li><span class="Send"></span>Send</li><br>
<li><span class="OK"></span> OK</li>
</ul>
</div>
</div>
</div>