边框和行内标签有麻烦
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: 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>另一答案
您必须定义边框的粗细。否则，它不会出现。
p#p01 {
text-align: center;
display: block;
border-bottom: 1px solid black;
}
快乐编码！
以上是关于边框和行内标签有麻烦的主要内容，如果未能解决你的问题，请参考以下文章
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位