list

---

// description

---

演示

注意示例中以.ex开头的class在实际使用场景内是不必要的，此类class只为可视化文档的展示做辅助作用。

块级列表

<div class="ui-list-block">
    <div class="ui-list-block-item ex-padding">
        Test Content
    </div>
    <div class="ui-list-block-item ex-padding">
        Test Content
    </div>
    <div class="ui-list-block-item ex-padding">
        Test Content
    </div>
    <div class="ui-list-block-item ex-padding">
        Test Content
    </div>
</div>

竖排列表，在CN中常做用户头像排列样式

下面是一个整体水平居中的，每一行8格的列表。

<div class="ex-box">
    <div class="ui-list-vertical-wrap-8">
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="" title="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
        <div class="ui-list-vertical-item">
            <a class="ui-list-vertical-border" href="">
                <img src="http://www.thecn.com/img/com/logo.png.w61.jpg" alt="CourseNetworking">
            </a>
        </div>
    </div>
</div>