文字在线中间,CSS巧妙实现分隔线的几种方法

html-css080

文字在线中间,CSS巧妙实现分隔线的几种方法,第1张

<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

}

#welcome ul li em { display:blockfloat:leftheight:7pxmargin:6px 0border-right:1px solid #bcbcbcoverflow:hidden}

#welcome ul li em [选择ID为welcom的容器下ul li 里的em元素为样式试用对象]

display:block[做为块元素显示]

float:left[靠左浮动,默认li元素是列显示,用了float可以让容器在一行内显示]

height:7px[高7像素]

margin:6px 0[子容器距父容器上下边框的距离分别为6像素,等同于margin:6px 0 6px 0]

border-right:1px solid #bcbcbc[容器右边框显示为1像素,实线,颜色为#bcbcbc]

overflow:hidden[超出容易可见面积部分内容不显示]

css中写border-bottom:1px dashed #ccc

dashed 虚线

solid 实线

dotted 点

<style>

.c{float:leftwidth:200px}

li{float:leftwidth:200pxheight:30pxline-height:30pxborder-bottom:1px dashed #ccc}

</style>

<div class="c">

<ul>

<li>11111111111111111111</li>

<li>11111111111111111111</li>

<li>11111111111111111111</li>

</ul>

</div>