作者：liutiancinet | 来源：互联网 | 2023-06-23 07:50
这是例子的样式
自己实现的样式：
自己实现的代码：
1
2
3
4
5
6
7
|
怪兽必须死
热门
推荐
精品
保卫家园，人在城在！
|
css代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| .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;具体数字 自己定吧.
首先我觉得，后面带框的样式都是一样的，除去颜色不一样，建议用一个公共的类；至于上下对齐可以用vertical-align: middle；
保卫家园，人在城在！
本身就是块元素不需要添加到
中；
加上这个就好了，另外不建议p元素写在span标签中。
1
2
3
4
| .title span{
display:inline-block;
vertical-align:middle;
} |
京公网安备 11010802041100号