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 >
  <div ></div>
  <div  style="padding-left: 70px;">
    <button>Offers</button>
    <button>Opportunity</button>

  </div>
  <div  style="padding-left: 140px">
    <div  *ngIf="tableOffer">
      <ul >
        <div >Legend</div>
        <li><span ></span> KO</li><br>
        <li><span ></span>Send</li><br>
        <li><span ></span> OK</li>
      </ul>
    </div>
  </div>
</div>

I have tried using padding but on mobile device it isn't look good.

CodePudding user response：

Something like this?

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div  style="width:fit-content;">
    <button>Offers</button>
    <button>Opportunity</button>
  </div>
  <div >
    <div  *ngIf="tableOffer">
      <ul >
        <div >Legend</div>
        <li><span ></span> KO</li><br>
        <li><span ></span>Send</li><br>
        <li><span ></span> OK</li>
      </ul>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div ></div>
  <div  style="">
    <button>Offers</button>
    <button>Opportunity</button>

  </div>
  <div  style="padding-left: 140px">
    <div  *ngIf="tableOffer">
      
      <ul >        
        <div >Legend</div>
        <li><span ></span> KO</li><br>
        <li><span ></span>Send</li><br>
        <li><span ></span> OK</li>
      </ul>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div ></div>
  <div  style="padding-left: 70px;">
    <button>Offers</button>
    <button>Opportunity</button>

  </div>
  <div  style="padding-left: 140px">
    <div  *ngIf="tableOffer">
      <ul >
        <div >Legend</div>
        <li><span ></span> KO</li><br>
        <li><span ></span>Send</li><br>
        <li><span ></span> OK</li>
      </ul>
    </div>
  </div>
</div>