边框和行内标签有麻烦

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了边框和行内标签有麻烦相关的知识,希望对你有一定的参考价值。

我正在尝试制作<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>
答案

您可以将width: 1000pxwidth: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>
另一答案

您必须定义边框的粗细。否则,它不会出现。

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

快乐编码!

以上是关于边框和行内标签有麻烦的主要内容,如果未能解决你的问题,请参考以下文章

前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

是否可以使用引导程序将边框添加到单独行内的 col

关于标签显示模式的一些总结

怎么用CSS设置html中的表格边框样式

html所有关于内边距外边距的标签属性

什么是行内元素块级元素?