CSS对齐div和文本

Question

我正在尝试创建图表键。

我正在使用CSS和HTML。

此刻，我已经有了它，因此显示的关键标题旁边是参数，每个参数都有一个彩色的正方形和文本。

但是，它们不对齐，我希望文本在彩色正方形旁边。

要查看更多关于我的信息，请单击此处或仅查看以下代码， 以查看此jsfiddle ：

HTML：

<div class="asset-views-key">
<div class="asset-views-key-title">Key:</div>
<div class="asset-views-key-param">
    <div class="asset-views-key-square" style="background-color: #FF0000;"></div>Negative
</div>  
<div class="asset-views-key-param">
    <div class="asset-views-key-square" style="background-color: #00FF00;"></div>Positive
</div>
<div class="cb"></div>

CSS：

 .asset-views-key-square {
    width: 8px;
    height: 8px;
}
.asset-views-key-param {
    float: left;
    padding-right: 10px;
}
.asset-views-key-title {
    float: left;
    padding-right: 5px;
}

Answer 1

像这样

演示

CSS

.asset-views-key{
    vertical-align:middle;       
    float:left;

}
.asset-views-key-square {
    width: 8px;
    height: 8px;
    float:left;
    margin:6px 7px;

}