[k]css-横线-文字-横线(实现方法)

 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>

 

你可能感兴趣的:(css)