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达到目的, 代码略.