关注前端开发
关注用户体验

CSS巧妙实现分隔线的几种方法

前几天一@同事看新浪微博里有个类似分隔线的提示,就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法。

单个标签实现分隔线:

 

点此查看实例展示

 

.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;
}

优点:代码简洁

巧用背景色实现分隔线:

 

点此查看实例展示

 

.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;
}

优点:代码简洁,可自适应宽度

inline-block实现分隔线:

 

点此查看实例展示

 

.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;
}

优点:文字可多行

浮动实现分隔线:

 

点此查看实例展示

 

.demo_line_04{
    width:600px;
}
.demo_line_04{
    overflow: hidden;
    _zoom: 1;
}
.demo_line_04 b{
    background: #ddd;
    margin-top: 8px;
    float: left;
    width: 26%;
    height: 1px;
    _overflow: hidden;
}

优点:NUN

利用字符实现分隔线:

 

点此查看实例展示

 

<div class="demo_line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
.demo_line_05{
    letter-spacing: -1px;
    color: #ddd;
}
.demo_line_05 span{
    letter-spacing: 0;
    color: #222;
    margin:0 20px;
}

优点:代码简洁 以上简单介绍了分隔线的写法,也许还有其它比较合适的写法,看环境各取所需吧!

赞(31)
未经允许不得转载:大前端 » CSS巧妙实现分隔线的几种方法
分享到: 更多 (0)

评论 44

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #36

    I have been surfing online more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the net will be much more useful than ever before.

    Bernard Dantuono1周前 (05-15)回复
  2. #35

    I wanted to post you one very little observation in order to say thank you again on the spectacular views you’ve contributed at this time. This is so unbelievably generous with you to supply easily all that many of us could have sold for an e-book to make some money for themselves, even more so considering the fact that you could possibly have done it in the event you wanted. These techniques as well acted like a good way to be aware that other people have a similar dream similar to my own to understand somewhat more in respect of this condition. I’m certain there are many more pleasant instances ahead for individuals who find out your site.

    ultra boost 3.02周前 (05-13)回复
  3. #34

    I found your weblog site on google and check a couple of of your early posts. Proceed to maintain up the superb operate. I just additional up your RSS feed to my MSN Information Reader. In search of forward to reading extra from you later on!…

    cat tales2周前 (05-08)回复
  4. #33

    Keep up the good work! Thanks.

    schoonheidsspecialist1个月前 (04-17)回复
  5. #32

    Enjoyed the post.

    Huidinstituut1个月前 (04-17)回复
  6. #31

    Thanks for this nice post. …

    floaten1个月前 (04-16)回复
  7. #30

    Keep up the good work! Thanks.

    Zwangerschapsmasker1个月前 (04-16)回复
  8. #29

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Littekens verminderen1个月前 (04-16)回复
  9. #28

    Nice post! Thank you.

    boekhouder1个月前 (04-11)回复
  10. #27

    That is a really good tip especially to those new to the blogosphere. Short but very accurate info… Thank you for sharing this one. A must read article!

    Apex Legends Season 12个月前 (03-31)回复
  11. #26

    Excellent blog here! Additionally your web site rather a lot up fast! What host are you using? Can I get your affiliate hyperlink for your host? I wish my site loaded up as fast as yours lol.

    my singing monsters2个月前 (03-28)回复
  12. #25

    Very clear website , regards for this post.

    Kristine Saliba2个月前 (03-11)回复
  13. #24

    PL

    lxjwlt5年前 (2014-05-09)回复
  14. #23

    暂时还没遇到客户这样的需求,设计也还没遇到过,,,,

    Robin6年前 (2013-01-19)回复
  15. #22

    😎 第2种最好

    ICON6年前 (2013-01-08)回复
  16. #21

    我平时用的也是第二种,比较好。其它几种麻烦了点,第一种也还行。

    周威7年前 (2012-11-16)回复
  17. #20

    写的不错,我稍微扩展了一下,想了几个其他的办法:http://baoeni.com/blog/

    baoeni7年前 (2012-11-16)回复
  18. #19

    用字符的那个,万一字体不对路不是就有问题了?

    控达人7年前 (2012-08-07)回复
    • 你可以设置一个字体的

      浩子7年前 (2012-08-07)回复
  19. #18

    hr配上样式不是更简单?

    王叨叨7年前 (2012-06-21)回复
    • 宾果

      言冬7年前 (2012-08-22)回复
      • 什么意思?

        斌果6年前 (2013-05-18)回复
        • 哈哈,宾果~~

          言冬6年前 (2013-05-19)
  20. #17

    看来学习的东西很多啊。

    fengzheng1267年前 (2012-06-10)回复
  21. #16

    第一种方法非常简单,学习了.不过在IE6,7下会因为行高的原因只显示半个字,再加上position:relative属性让就OK了。

    初七7年前 (2012-05-29)回复
  22. #15

    第一种方法使用line-height不兼容

    hh7年前 (2012-05-29)回复
  23. #14

    想问下,你的代码高亮是怎么做的?

    mango7年前 (2012-05-08)回复
  24. #13

    总结的不错啦,我一直用的是第二种,没想到有这么多方法,呵呵。

    网站模板7年前 (2012-05-07)回复
  25. #12

    这个看不懂了。

    洛阳最好的医院7年前 (2012-05-07)回复
  26. #11

    不错呀!

    lft6187年前 (2012-05-05)回复
  27. #10

    喜欢大前端!!!

    yy7年前 (2012-05-04)回复
  28. #9

    分隔线很少用到啊。

    wmtimes7年前 (2012-05-04)回复
  29. #8

    学习了,见识了。
    建站论坛

    LONG7年前 (2012-05-03)回复
  30. #7

    挺有意思,一般人一下子想不到这么多方法。总结的好!

    前端组7年前 (2012-05-03)回复
  31. #6

    看来光知道css语法远远不够啊,创意无限啊

    互联网战7年前 (2012-05-02)回复
  32. #5

    不错诶,可以试试看

    FK博客7年前 (2012-05-02)回复
  33. #4

    呵呵 不错的总结 喜欢这个评论框集成的更能

    倡萌7年前 (2012-05-02)回复
  34. #3

    不错,收藏了

    一堵墙7年前 (2012-05-02)回复
  35. #2

    很不错的说,顺便占个前排~

    写代码7年前 (2012-05-02)回复
  36. #1

    来看看浩子,首页的XX弄好了 :mrgreen:

    蚂蚁在线7年前 (2012-05-02)回复
    • 路过这里。。。。不错

      Anguseleven6年前 (2013-02-17)回复

themebetter 国内更好的WordPress主题服务商

立即前往