SOURCE

<!-- 1. 两侧图标，右侧扩展信息 -->
<div class="m-media-list">
    <ul class="block">
        <li class="item">
            <span class="icon-l icon-home"></span>
            <span class="txt">首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页</span>
            <span class="icon-r icon-arrow"></span>
        </li>
        <li class="item">
            <span class="info">扩展信息</span>
            <span class="icon-l icon-home"></span>
            <span class="txt">右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息</span>
            <span class="icon-r icon-arrow"></span>
        </li>
        <li class="item">
            <span class="icon-l icon-home"></span>
            <span class="txt">可以有些没有箭头</span>
        </li>
        <li class="item">
            <a href="javascript:;">
                <span class="icon-l icon-home"></span>
                <span class="txt">可以加链接</span>
                <span class="icon-r icon-arrow"></span>
            </a>
        </li>
    </ul>
</div>



<!-- 2. 没有左侧图标，右侧扩展信息 -->
<div class="m-media-list no-icon-l">
    <ul class="block">
        <li class="item">
            <span class="txt">没有左侧图标</span>
            <span class="icon-r icon-arrow"></span>
        </li>
        <li class="item">
            <span class="info">扩展信息</span>
            <span class="txt">右侧可以显示扩展信息</span>
            <span class="icon-r icon-arrow"></span>
        </li>
    </ul>
</div>



<!-- 3. 没有右侧图标，右侧扩展信息 -->
<div class="m-media-list no-icon-r">
    <ul class="block">
        <li class="item">
            <span class="icon-l icon-home"></span>
            <span class="txt">没有右侧图标</span>
        </li>
        <li class="item">
            <span class="info">扩展信息</span>
            <span class="icon-l icon-home"></span>
            <span class="txt">右侧可以显示扩展信息</span>
        </li>
    </ul>
</div>



<!-- 4. 没有两侧图标，右侧扩展信息 -->
<div class="m-media-list no-icon">
    <ul class="block">
        <li class="item">
            <span class="txt">没有两侧图标</span>
        </li>
        <li class="item">
            <span class="info">扩展信息</span>
            <span class="txt">右侧可以显示扩展信息</span>
        </li>
    </ul>
</div>



<!-- 5. 底边左侧缩进 -->
<div class="m-media-list short-border">
    <ul class="block">
        <li class="item">
            <span class="icon-l icon-home"></span>
            <span class="txt">底边左侧缩进</span>
            <span class="icon-r icon-arrow"></span>
        </li>
        <li class="item">
            <span class="info">扩展信息</span>
            <span class="icon-l icon-home"></span>
            <span class="txt">右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息</span>
            <span class="icon-r icon-arrow"></span>
        </li>
    </ul>
</div>



<!-- 6. 底边左侧缩进，同时没有左侧图标 -->
<div class="m-media-list no-icon-l short-border">
    <ul class="block">
        <li class="item">
            <span class="txt">底边左侧缩进，同时没有左侧图标</span>
            <span class="icon-r icon-arrow"></span>
        </li>
        <li class="item">
            <span class="info">扩展信息</span>
            <span class="txt">右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息</span>
            <span class="icon-r icon-arrow"></span>
        </li>
    </ul>
</div>



<!-- 6. 底边左侧缩进，同时没有右侧图标 -->
<div class="m-media-list no-icon-r short-border">
    <ul class="block">
        <li class="item">
            <span class="icon-l icon-home"></span>
            <span class="txt">底边左侧缩进，同时没有右侧图标</span>
        </li>
        <li class="item">
            <span class="info">扩展信息</span>
            <span class="icon-l icon-home"></span>
            <span class="txt">右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息</span>
        </li>
    </ul>
</div>



<!-- 6. 底边左侧缩进，同时没有两侧图标 -->
<div class="m-media-list no-icon short-border">
    <ul class="block">
        <li class="item">
            <span class="txt">底边左侧缩进，同时没有两侧图标</span>
        </li>
        <li class="item">
            <span class="info">扩展信息</span>
            <span class="txt">右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息右侧可以显示扩展信息</span>
        </li>
    </ul>
</div>



<!-- 6. 包含表单 -->
<div class="m-media-list with-form">
    <ul class="block">
        <li class="item">
            <div class="txt">
                <span class="l">表单名字</span>
                <span class="r">
                    这里可以放表单
                </span>
            </div>
            <span class="icon-r icon-arrow"></span>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">表单名字</span>
                <span class="r">
                    这里可以放表单
                </span>
            </div>
            <span class="icon-r icon-arrow"></span>
        </li>
    </ul>
</div>

/* 最外层 */
.m-media-list { overflow: hidden; position: relative; margin: 20px; background: #fff; font-size: 14px; }
    /* 列表 */
    .m-media-list > .block { margin 0; padding: 0; }
        /* 单个 */
        .m-media-list > .block > .item { position: relative; margin: 0; padding: 0 30px 0 50px; border-bottom: 1px solid #eee; }
            .m-media-list > .block > .item:last-child { border-bottom: none; }
            .m-media-list .icon-l, .m-media-list .icon-r { position: absolute; top: 50%; width: 16px; height: 16px; background-repeat: no-repeat; background-position: 100% 50%; -webkit-background-size: auto 100%; background-size: auto 100%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
                /* 左侧图标 */
                .m-media-list .icon-l { left: 10px; width: 30px; height: 30px; }
                /* 右侧图标 */
                .m-media-list .icon-r { right: 15px; }
                /* 可替换和扩展图标 */
                .m-media-list .icon-home { background-image: url(http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png); }
                .m-media-list .icon-arrow { background-image: url(http://pic.celong.cn/152353183810.png); }
                /* 文本 */
                .m-media-list .txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; padding: 15px 0; }
                .m-media-list .info { float: right; padding: 15px 0 15px 10px; color: #999; }

    /* 没有左侧图标 */
    .m-media-list.no-icon-l > .block > .item { padding-left: 15px; }
    /* 没有右侧图标 */
    .m-media-list.no-icon-r > .block > .item { padding-right: 15px; }
    /* 没有两侧图标 */
    .m-media-list.no-icon > .block > .item { padding-left: 15px; padding-right: 15px; }
    /* 底边左侧缩进 */
    .m-media-list.short-border > .block > .item { overflow: visible; margin-left: 55px; padding-left: 0; }
        .m-media-list.short-border .icon-l { left: -40px; }
    /* 底边左侧缩进，同时没有左侧图标 */
    .m-media-list.no-icon-l.short-border > .block > .item, .m-media-list.no-icon.short-border > .block > .item { margin-left: 15px; }

    /* 包含表单 */
    .m-media-list.with-form > .block > .item { margin-left: 15px; padding-left: 80px; }
        .m-media-list.with-form .txt { white-space: normal; }
            .m-media-list.with-form .txt .l { overflow: hidden; position: absolute; margin-left: -80px; width: 80px; height: 20px;  white-space: normal; }
            .m-media-list.with-form .txt .r { float: none; display: block; }