时间戳

首页 > 解决方案 > 边框和内联标签有问题

html - 边框和内联标签有问题

问题描述

我试图<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>

标签： htmlcss

解决方案

您可以更改width: 1000px为width:100%div#div03

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>

推荐阅读