如何实现两个HTML颜色方块与图例文字在同一行显示

问题原因 #

你的图例元素没法排在同一行，是因为用来做彩色方块的<div>是块级元素，浏览器默认会给块级元素设置前后换行，导致每个方块单独占一行。

修复方案 #

选任意一种即可，改动量都很小：

方案1：仅修改CSS（无需调整HTML结构）

给.box类添加行内块显示属性，同时设置垂直对齐，避免方块和文字出现高低错位：

.row
{
    width: 570px;
    border: 1px solid lightgray;
    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;
    vertical-align: middle;
}

.red {
    background-color: #ab3025;
}

.orange {
    background-color: #f5a000;
}

原有HTML代码不需要做任何修改，保存后就能实现「Key: 」、红色方块+Red标注、橙色方块+Orange标注全部排在同一行的效果，下方的温度提示文字会正常在第二行显示。

方案2：调整HTML标签（把块级元素换成行内元素）

如果不想修改CSS的显示属性，可以直接把做方块的<div>标签换成默认行内显示的<span>标签，同样记得加垂直对齐属性避免错位：

<div class="row">
    <strong>Key: </strong> 
    
    <span class="box red"> </span>
    <span> Red </span>

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

/* 只需要给.box加一行垂直对齐属性即可，其余CSS保持不变 */
.box {
    height: 18px;
    width: 18px;
    margin-right: 5px;
    vertical-align: middle;
}

两种方案最终效果完全一致，根据自己的代码习惯选择即可。

内容的提问来源于stack exchange，提问作者Alex