边界和内联标记有问题

Question

我试图制作一个<p>标签，在图像中间的底部有一个边框。但我遇到了一些问题。首先，我添加了display: inline属性，以便边框只显示在文本下方，但后来我无法进行文本对齐，所以我的第一个想法是添加边距并手动编辑边框，但当我更改缩放级别或切换到移动视图时，问题边框再次出现。

如果有人能找到与display:block;文本对齐的方法或任何其他解决我问题的方法，这是我的代码。

p#p01 {
text-align: center;
display: block;
border-bottom: solid black;
}
div#div03 {
background-image: url("background.jpg");
width: 1000px;
height: 300px;
background-repeat: no-repeat;
background-size: 1000px 300px;
}

<div id="div03">
<p id="p01">TESTE TETSTEE</p>
</div>

Answer 1

对于div#div03，您可以将width: 1000px更改为width:100%

p#p01 {
text-align: center;
display: block;
border-bottom: solid black;
}
div#div03 {
background-image: url("background.jpg");
width: 100%;
height: 300px;
background-repeat: no-repeat;
background-size: 1000px 300px;
}

<div id="div03">
<p id="p01">TESTE TETSTEE</p>
</div>

Answer 2

您必须定义边界的厚度。否则，它不会出现。

p#p01 {
text-align: center;
display: block;
border-bottom: 1px solid black;
}

编码快乐！