老师您好,请问为什么p标签浮上去了?
来源:5-2 项目作业
慕仔3411021
2020-12-10 22:04:09
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- aboutus -->
<section class="aboutus">
<div class="center-wrap">
<h2>关于我们</h2>
<p>about us</p>
</div>
</section>
</body>
</html>
/* aboutus */
.aboutus{
height: 374px;
padding-top: 32px;
}
.aboutus .center-wrap{
width: 1201px;
margin: 0 auto;
position: relative;
}
.aboutus .center-wrap h2{
width: 128px;
height: 42px;
color: #696868;
font-size: 32px;
line-height: 38px;
text-align: center;
position: absolute;
top: 0;
left: 50%;
margin-left: -64px;
}
.aboutus .center-wrap h2::before{
content: '';
width: 513px;
height: 42px;
border-bottom: 1px solid #808080;
position: absolute;
top: 0;
left: -525px;
}
.aboutus .center-wrap h2::after{
content: '';
width: 513px;
height: 42px;
border-bottom: 1px solid #808080;
position: absolute;
top: 0;
right: -525px;
}
在这里输入代码,可通过选择【代码语言】突出显示
1回答
同学你好,问题回答如下:
1、p标签上浮是因为p标签和h2标签在同一个盒子里,而h2使用了绝对定位,绝对定位会使元素脱离正常的文档流,不占据空间,所以才会出现p标签上浮。同学可通过给p标签加绝对定位来调整p标签的位置,可参考下图老师的代码:

2、另外同学的代码有需要优化的地方,虽然效果都能实现,如果大量使用定位会导致接下来的布局很乱,都需要用定位来居中,代码量会很大。
3、建议可以把相同的样式放在一起设置,不用再单独进行设置,h2标签可以使用text-algin:cnter;属性实现居中,代码很灵活,实现方法很多种,但是要尽量考虑到选择最优化的方案。下图为老师整体修改的代码,结构不变,但是样式老师做了改动,同学可以对照自己的代码参考一下:

祝学习愉快!
相似问题
回答 1