
			<p>前几天一<a href="http://weibo.com/lyushine" target="_blank">@同事</a>看新浪微博里有个类似分隔线的提示，就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法，个人比较喜欢第二种，我也给出了最后第五种比较2的写法，请大家拍砖，或者提供其他好的方法。</p>
<h2>单个标签实现分隔线：</h2>
<p>&nbsp;</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=4258" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<p>&nbsp;</p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;">.<span style="color: #170;">demo_line_01</span>{
    <span style="color: #000;">padding</span>: <span style="color: #164;">0</span> <span style="color: #164;">20px</span> <span style="color: #164;">0</span>;
    <span style="color: #000;">margin</span>: <span style="color: #164;">20px</span> <span style="color: #164;">0</span>;
    <span style="color: #000;">line-height</span>: <span style="color: #164;">1px</span>;
    <span style="color: #000;">border-left</span>: <span style="color: #164;">200px</span> <span style="color: #164;">solid</span> <span style="color: #219;">#ddd</span>;
    <span style="color: #000;">border-right</span>: <span style="color: #164;">200px</span> <span style="color: #164;">solid</span> <span style="color: #219;">#ddd</span>;
    <span style="color: #000;">text-align</span>: <span style="color: #164;">center</span>;
}</pre>
<p>优点：代码简洁</p>
<h2>巧用背景色实现分隔线：</h2>
<p>&nbsp;</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=4258" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<p>&nbsp;</p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;">.<span style="color: #170;">demo_line_02</span>{
    <span style="color: #000;">height</span>: <span style="color: #164;">1px</span>;
    <span style="color: #000;">border-top</span>: <span style="color: #164;">1px</span> <span style="color: #164;">solid</span> <span style="color: #219;">#ddd</span>;
    <span style="color: #000;">text-align</span>: <span style="color: #164;">center</span>;
}
.<span style="color: #170;">demo_line_02</span> <span style="color: #170;">span</span>{
    <span style="color: #000;">position</span>: <span style="color: #164;">relative</span>;
    <span style="color: #000;">top</span>: <span style="color: #164;">-8px</span>;
    <span style="color: #000;">background</span>: <span style="color: #219;">#fff</span>;
    <span style="color: #000;">padding</span>: <span style="color: #164;">0</span> <span style="color: #164;">20px</span>;
}</pre>
<p>优点：代码简洁，可自适应宽度</p>
<h2>inline-block实现分隔线：</h2>
<p>&nbsp;</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=4258" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<p>&nbsp;</p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;">.<span style="color: #170;">demo_line_03</span>{
    <span style="color: #000;">width</span>:<span style="color: #164;">600px</span>;
}
.<span style="color: #170;">demo_line_03</span> <span style="color: #170;">b</span>{
    <span style="color: #000;">background</span>: <span style="color: #219;">#ddd</span>;
    <span style="color: #000;">margin-top</span>: <span style="color: #164;">4px</span>;
    <span style="color: #000;">display</span>: <span style="color: #164;">inline-block</span>;
    <span style="color: #000;">width</span>: <span style="color: #164;">180px</span>;
    <span style="color: #000;">height</span>: <span style="color: #164;">1px</span>;
    <span style="color: #000;">_overflow</span>: <span style="color: #164;">hidden</span>;
    <span style="color: #000;">vertical-align</span>: <span style="color: #164;">middle</span>;
}
.<span style="color: #170;">demo_line_03</span> <span style="color: #170;">span</span>{
    <span style="color: #000;">display</span>: <span style="color: #164;">inline-block</span>;
    <span style="color: #000;">width</span>: <span style="color: #164;">220px</span>;
    <span style="color: #000;">vertical-align</span>: <span style="color: #164;">middle</span>;
}</pre>
<p>优点：文字可多行</p>
<h2>浮动实现分隔线：</h2>
<p>&nbsp;</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=4258" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<p>&nbsp;</p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;">.<span style="color: #170;">demo_line_04</span>{
    <span style="color: #000;">width</span>:<span style="color: #164;">600px</span>;
}
.<span style="color: #170;">demo_line_04</span>{
    <span style="color: #000;">overflow</span>: <span style="color: #164;">hidden</span>;
    <span style="color: #000;">_zoom</span>: <span style="color: #164;">1</span>;
}
.<span style="color: #170;">demo_line_04</span> <span style="color: #170;">b</span>{
    <span style="color: #000;">background</span>: <span style="color: #219;">#ddd</span>;
    <span style="color: #000;">margin-top</span>: <span style="color: #164;">8px</span>;
    <span style="color: #000;">float</span>: <span style="color: #164;">left</span>;
    <span style="color: #000;">width</span>: <span style="color: #164;">26%</span>;
    <span style="color: #000;">height</span>: <span style="color: #164;">1px</span>;
    <span style="color: #000;">_overflow</span>: <span style="color: #164;">hidden</span>;
}</pre>
<p>优点：NUN</p>
<h2>利用字符实现分隔线：</h2>
<p>&nbsp;</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=4258" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<p>&nbsp;</p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;div</span> <span style="color: #00c;">class</span>=<span style="color: #a11;">"demo_line_05"</span><span style="color: #170;">&gt;</span>———————————<span style="color: #170;">&lt;span</span><span style="color: #170;">&gt;</span>小小分隔线 字符来实现<span style="color: #170;">&lt;/span</span><span style="color: #170;">&gt;</span>————————————<span style="color: #170;">&lt;/div</span><span style="color: #170;">&gt;</span></pre>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;">.<span style="color: #170;">demo_line_05</span>{
    <span style="color: #000;">letter-spacing</span>: <span style="color: #164;">-1px</span>;
    <span style="color: #000;">color</span>: <span style="color: #219;">#ddd</span>;
}
.<span style="color: #170;">demo_line_05</span> <span style="color: #170;">span</span>{
    <span style="color: #000;">letter-spacing</span>: <span style="color: #164;">0</span>;
    <span style="color: #000;">color</span>: <span style="color: #219;">#222</span>;
    <span style="color: #000;">margin</span>:<span style="color: #164;">0</span> <span style="color: #164;">20px</span>;
}</pre>
<p>优点：代码简洁 以上简单介绍了分隔线的写法，也许还有其它比较合适的写法，看环境各取所需吧！</p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/css-a-line/">CSS巧妙实现分隔线的几种方法</a></p>		