How to place two html color boxes in the same row-CodePudding

I am trying to make a key that has two colored boxes and the value that it corresponds to. I want to move the red box, the value "Red", the orange box, and the value "Orange" all onto the same line with "Key: ". This is currently what I have:

.row
{
    width: 570px;
    border: 1px solid lightgray;
    border-style: solid;
    margin: 0 auto;
    border-radius: 3px;
    padding-left: 90px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-indent: -46px;
    line-height: 2;
}

.box {
    height: 18px;
    width: 18px;
    margin-right: 5px;
}

.red {
    background-color: #ab3025;
}

.orange {
    background-color: #f5a000;
}

   <div >
      <strong>Key: </strong> 
      
      <div > </div>
      <span> Red </span>


      <div ></div>
      <span> Orange </span>
      
      <br>
      <em>Darker color corresponds to hotter temp</em>
 </div>

CodePudding user response：

Set the display property of your .box class to inline-block:

.row {
  width: 570px;
  border: 1px solid lightgray;
  border-style: solid;
  margin: 0 auto;
  border-radius: 3px;
  padding-left: 90px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-indent: -46px;
  line-height: 2;
}

.box {
  height: 18px;
  width: 18px;
  margin-right: 5px;
  display: inline-block;
}

.red {
  background-color: #ab3025;
}

.orange {
  background-color: #f5a000;
}

<div >
  <strong>Key: </strong>

  <div > </div>
  <span> Red </span>


  <div ></div>
  <span> Orange </span>

  <br>
  <em>Darker color corresponds to hotter temp</em>
</div>

CodePudding user response：

One Word: Flexbox

        .row {
            width: 570px;
            border: 1px solid lightgray;
            border-style: solid;
            margin: 0 auto;
            border-radius: 3px;
            padding-left: 90px;
            padding-top: 20px;
            padding-bottom: 20px;
            text-indent: -46px;
            line-height: 2;
        }

        .box {
            height: 18px;
            width: 18px;
            margin-right: 5px;
        }

        .red {
            background-color: #ab3025;
        }

        .orange {
            background-color: #f5a000;
        }

        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .container-item {
            margin-left: 10px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .container-item > div {
            margin-right: 50px;
        }

<div >
        <div >
            <strong>Key: </strong>

            <div >
                <div > </div>
                <span>Red</span>
            </div>


            <div >
                <div > </div>
                <span>Orange</span>
            </div>
        </div>
        <br>
        <em>Darker color corresponds to hotter temp</em>
    </div>

CodePudding user response：

You can check below code

.row {
  width: 570px;
  border: 1px solid lightgray;
  border-style: solid;
  margin: 0 auto;
  border-radius: 3px;
  padding-left: 5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  line-height: 2;
}
.box-text,.box {
  width: 20px;
  height: 20px;
  margin-right: 0.4rem;
}
.box {display: inline-block;}
.red {
  background-color: #ab3025;
}
.orange {
  background-color: #f5a000;
}

<div >
  <div >
    <strong>Key:</strong>
    <div ></div>
    <span class='box-text'>Red</span>
    <div ></div>
    <span class='box-text'>Orange</span>
    <br>
    <em>Darker color corresponds to hotter temp</em>
  </div>
</div>

CodePudding user response：

.row{
    display: flex;
    justify-content: space-around;
}

just add these lines in your "row" class. in addition, you must learn "flexbox" in css. It really helps a lot in designing frontend of a website.