-2
Q
文本在一条线上
A
回答
0
毫无遮拦与背景颜色(即:白色)
但使用:after
和:before
个伪元素,而不是:
.line{
overflow: hidden;
text-align: center;
}
.line span{
position:relative;
}
.line>span:after,
.line>span:before{
position:absolute;
top:50%;
width:99em;
content:"";
height:1px;
background:#ddd;
}
.line>span:after { left: 110%; }
.line>span:before{ right: 110%; }
Bla here
<p class="line"><span>User name</span></p>
and here
0
检查:
.line{
width:100%;
height:auto;
position:relative;
text-align:center;
background:white; /*It must have same color*/
}
.line .color{
z-index:0;
position:absolute;
top:17px; /*If your font size is bigger, increase this value*/
height:1px; /*Want a bolder line? Increase this value*/
width:100%;
background:gray; /*Want to change line color? Change it here*/
}
.line .text{
z-index:1;
position: relative;
display:inline-block;
padding:10px;
background:white; /*It must have same color*/
font-size:10px; /*Change font size*/
}
<div class="line">
<div class="color">
</div>
<div class="text">
oder
</div>
</div>
或者尝试here
相关问题
- 1. 在一条线上将文本分隔到另一条线上?
- 2. 在一条线上
- 3. 线条元素在一条线上
- 4. HTML:着色文本的一部分在一条线上
- 5. 在一条直线上溢出一个div的文本
- 6. 在上下文中旋转一条线?
- 7. 我如何得到重复文本后话在一条线上
- 8. 如何在一条线上居中文本
- 9. 如何在HTML文本上绘制一条线
- 10. C++在同一条线上
- 11. 力点在一条线上
- 12. SED在一条线上
- 13. 焦油在一条线上?
- 14. 使用iText在两条不同的线条上对齐文本
- 15. 在一条线图上划线
- 16. <img>旁边的一些文本在一条线上 - 签名?
- 17. 如何在文本文件中找到一条线
- 18. 在一条线上移动一个点:用两条线之间的线
- 19. touchmove在画布上画两条线而不是一条线
- 20. 在iphone上画一条线作为线条
- 21. 线条悬停在Plotly中的文本
- 22. PHP如何找到一条直线从一个文本文件
- 23. JavaFx在文本区域组件上绘制线条
- 24. 在UITextView上绘制线条并相应地对齐文本
- 25. 线条在KML文件上不可见
- 26. 在wpf RichTextBox上画一条垂直线
- 27. 如何在LinearLayout上画一条线?
- 28. 在一条线上定位元素
- 29. 在一条线上居中多个UILabels
- 30. 这怎么能写在一条线上?
你能告诉我们你的代码?我建议使用jsfiddle.net – Philibobby
欢迎来到SO。请始终尝试发布您的代码,并指出为什么它不起作用以及您尝试了什么。看:[问] –
哦,我很抱歉!谢谢,我现在知道下次。 –