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>
时间： 2024-07-30 20:32:26