标签：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="utf-8" /> 5 <title>横线-文字-横线</title> 6 <style> 7 /*横线-文字-横线-方法1*/ 8 ul{padding:0;margin:30px auto;list-style:none;} 9 ul .list1{border-bottom:1px solid #666;margin-bottom:-15px;} 10 ul li a{width:100%;display:block;box-sizing:border-box;padding:5px;color:orange;text-align:center;text-decoration:none;cursor:default;} 11 ul li a span{background:#fff;padding:0 10px;} 12 /*横线-文字-横线-方法2*/ 13 .line{ width:300px; height:0px; border-bottom:1px solid #666; float:left;} 14 #div{ float:left; height:5px; line-height:5px; margin:0px 10px;color:orange;} 15 </style> 16 </head> 17 <body> 18 <p>横线-文字-横线-方法1:</p> 19 <ul> 20 <li class="list1"></li> 21 <li class="list2"><a href="javascript:;"><span>Hello world</span></a></li> 22 </ul> 23 <br /> 24 <p>横线-文字-横线-方法2:</p> 25 <div id="odiv"> 26 <div class="line"></div> 27 <div id="div">Hello world</div> 28 <div class="line"></div> 29 </div> 30 <br /><br /><br /> 31 <p><strong>总结:</strong>方法1可以自适应,方法2不可以,方法1较好一点</p> 32 </body> 33 </html>
标签：
原文地址：http://www.cnblogs.com/k11590823/p/4638325.html
