css - 如何让带框的字和旁边的字在一条水平线上

问题描述

问 题

这是例子的样式

自己实现的样式：

自己实现的代码：

<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;
}

解决方案

首先你的rec和fine 缺少样式vertical-align: middle;,所以导致在我浏览器看到的后三者就不是对齐的.
其次p标签建议拿出去,本就不是一行,不用放一起,而且p是块元素嵌套行内元素恐有不妥
再者,将外层span设置为display:inline-block,设置height:26px;和line-height:26px;应该就可以了
这里不限制26px;具体数字 自己定吧.

这篇关于css - 如何让带框的字和旁边的字在一条水平线上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！