如何在 HTML/CSS 中对齐“div”旁边的文本？

Question

我已经将多种颜色的图像地图放到了我的网站上，所以我想制作一个“div”块，并在它旁边解释该颜色在地图上代表什么。但是，当我尝试这样做时，文本只是位于“div”下方，如下所示：

#dark_green {height: 40px;
width: 80px;
background-color: #009933; }

#light_green {height: 40px;
width: 80px;
background-color: #00ff00;
 }

#dark_red {height: 40px;
width: 80px;
background-color: #ff0000;
 }

#light_orange {height: 40px;
width: 80px;
background-color: #ff8c1a;
 }

<div id="dark_green"></div> - Dark Green
<br>
<div id="light_green"></div> - Light Green
<br>
<div id="dark_red"></div> - Dark Red
<br>
<div id="light_orange"></div> - Light Orange

如何使文本与每个“div”相邻对齐？

Answer 1

使用您在此处给我们的标记，只需将所有框显示为inline-block.

注意：只需将使元素独一无二的东西添加到id. 所有其余的内容（对于多个元素来说是相同的）应该位于class. 为什么？如果你想让盒子 - 比如说 - 20px 宽，你现在必须编辑每个盒子ID ，随着我对你的代码的改进，你只需要编辑一次类就可以了。

编辑：将您的解释包装到一个元素中，a<span>在这里就可以了。然后您就可以对它们应用样式（位置、颜色等）。

.box {
    width: 80px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

.explanation {
    margin-left: 5px;
    vertical-align: middle;
}

#dark_green {
    background-color: #009933;
}

#light_green {
    background-color: #00ff00;
}

#dark_red {
    background-color: #ff0000;
}

#light_orange {
    background-color: #ff8c1a;
}

<div id="dark_green" class="box"></div><span class="explanation">- Dark Green</span>
<br>
<div id="light_green" class="box"></div><span class="explanation">- Light Green</span>
<br>
<div id="dark_red" class="box"></div><span class="explanation">- Dark Red</span>
<br>
<div id="light_orange" class="box"></div><span class="explanation">- Light Orange</span>