边框和行内标签有麻烦
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,盒模型,行内块转换,浮动,三大定位