这是例子的样式
自己实现的样式：
自己实现的代码：
<span class="title">
<span class="gameTitle">怪兽必须死</span>
<span class="hot">热门</span>
<span class="rec">推荐</span>
<span class="fine">精品</span>
<p class="des">保卫家园，人在城在！</p>
</span>css代码：
.row .title {
}
.title .gameTitle {
font-size: 15px;
margin:0px;
}
.title .hot {
margin: 0px;
font-size: 2px;
color:#fd9b01;
padding:1px;
border:1px solid #fd9b01;
vertical-align: middle;
}
.title .rec {
margin: 0px;
font-size: 2px;
padding:1px;
color:#1a7d03;
border:1px solid #1a7d03;
}
.title .fine {
margin: 0px;
font-size: 2px;
padding:1px;
color:#6d16bf;
border:1px solid #6d16bf;
}
首先我觉得，后面带框的样式都是一样的，除去颜色不一样，建议用一个公共的类；至于上下对齐可以用vertical-align: middle；<p class="des">保卫家园，人在城在！</p> 本身就是块元素不需要添加到<span></span>中；
首先你的rec和fine 缺少样式vertical-align: middle;,所以导致在我浏览器看到的后三者就不是对齐的.
其次p标签建议拿出去,本就不是一行,不用放一起,而且p是块元素嵌套行内元素恐有不妥
再者,将外层span设置为display:inline-block,设置height:26px;和line-height:26px;应该就可以了
这里不限制26px;具体数字 自己定吧.
加上这个就好了，另外不建议p元素写在span标签中。
.title span{
display:inline-block;
vertical-align:middle;
}