NEC学习 ---- 模块 -多行式面包屑导航

如上面形式面包屑的写法:

HTML如下,

<div class="m-crumb">

    <ul class="f-cb">

        <li><i>|</i><a href="#">面包屑导航, 竖线分割</a></li>

        <li><i>|</i><a href="#">面包屑, 可多行</a></li>

        <li><i>|</i><a href="#">面包屑</a></li>

        <li><i>|</i>文字</li>

    </ul>

</div>

 

CSS如下,

<style type="text/css">

    .m-crumb {

        width:80%;

        margin:45px auto;

        line-height: 1.5;overflow: hidden;

    }

    .m-crumb ul {

        margin-left: -20px; /* 这个是用来去掉第一个|线的 */

    }

    .m-crumb li{

        font-size:14px;

        float: left;

        white-space: nowrap; /* 空白的处理方式: normal 空白被浏览器忽略; pre 空白被浏览器保留; nowrap 文本不换黄,文本会在同一行上继续, 直到遇到<br/>*/

        word-wrap: normal; /* 换行的处理方式: normal 正常换行; break-word: 在长单词处换行 */

    }

    .m-crumb li i{

        display:inline-block;*display:inline;*zoom:1;width:20px; /*关键代码*/

        color:#ccc;text-align:center;font-size:14px;

    }

</style>

 

还有一种:

这种面包屑的就是有间隔, 利用margin-left达到目的, 代码略.