css请教大神!让字在线上,横线是用<hr>

html-css020

css请教大神!让字在线上,横线是用<hr>,第1张

.line{

border:0

border-top:1px solid #D5D5D5

}

你自己的HTML代码效果就是对的了,有时候没必要过于借助css,加了那些样式反而不对了

<div class="line_01">小小分隔线 单标签实现</div>

.demo_line_01{

padding: 0 20px 0

margin: 20px 0

line-height: 1px

border-left: 200px solid #ddd

border-right: 200px solid #ddd

text-align: center

<div class="line_02"><span>小小分隔线 巧用色实现</span></div>

.demo_line_02{

height: 1px

border-top: 1px solid #ddd

text-align: center

}

.demo_line_02 span{

position: relative

top: -8px

background: #fff

padding: 0 20px

}

<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>

.demo_line_03{

width:600px

}

.demo_line_03 b{

background: #ddd

margin-top: 4px

display: inline-block

width: 180px

height: 1px

_overflow: hidden

vertical-align: middle

}

.demo_line_03 span{

display: inline-block

width: 220px

vertical-align: middle

}