如何将两个html颜色框放在同一行答案

【问题标题】：How to place two html color boxes in the same row如何将两个html颜色框放在同一行
【发布时间】：2022-07-08 00:38:41
【问题描述】：

我正在尝试制作一个具有两个彩色框和它对应的值的键。我想用“Key:”将红色框、值“Red”、橙色框和值“Orange”全部移动到同一行。这是我目前拥有的：

.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 class="row">
      <strong>Key: </strong> 
      
      <div class="box red"> </div>
      <span> Red </span>


      <div class="box orange"></div>
      <span> Orange </span>
      
      <br>
      <em>Darker color corresponds to hotter temp</em>
 </div>

【问题讨论】：

标签： html css

【解决方案1】：

将.box 类的display 属性设置为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 class="row">
  <strong>Key: </strong>

  <div class="box red"> </div>
  <span> Red </span>


  <div class="box orange"></div>
  <span> Orange </span>

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

【讨论】：

完美，非常感谢。有没有办法让我把盒子往下移一点，这样它们就不会比字母高了？如果可能的话，我可以让它们以字母居中吗？

【解决方案2】：

一句话：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 class="row">
        <div class="container">
            <strong>Key: </strong>

            <div class="container-item">
                <div class="box red"> </div>
                <span>Red</span>
            </div>


            <div class="container-item">
                <div class="box orange"> </div>
                <span>Orange</span>
            </div>
        </div>
        <br>
        <em>Darker color corresponds to hotter temp</em>
    </div>

【讨论】：

【解决方案3】：

您可以查看以下代码

.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 class="row">
  <div class="col-12">
    <strong>Key:</strong>
    <div class="box red"></div>
    <span class='box-text'>Red</span>
    <div class="box orange"></div>
    <span class='box-text'>Orange</span>
    <br>
    <em>Darker color corresponds to hotter temp</em>
  </div>
</div>

【讨论】：

完美，非常感谢。有没有办法让我把盒子稍微往下移一点，这样它们就不会比字母高了？如果可能的话，我可以让它们以字母居中吗？