Teal TealUI

列表typo/list

有序列表和无序列表。

基本用法
间隔线
文本
水平列表
菜单列表

基本用法

  • 列表 list
  • 列表 list
    • 子列表 list
      • 子列表 list
      • 子列表 list
    • 子列表 list
      1. 子列表 list
      2. 子列表 list
  • 列表 list
<ul class="x-list">
    <li>列表 list</li>
    <li>
        列表 list
        <ul>
            <li>
                子列表 list
                <ul>
                    <li>子列表 list</li>
                    <li>子列表 list</li>
                </ul>
            </li>
            <li>
                子列表 list
                <ol>
                    <li>子列表 list</li>
                    <li>子列表 list</li>
                </ol>
            </li>
        </ul>
    </li>
    <li>列表 list</li>
</ul>

间隔线

添加 .x-list-baseline 设置分割线。 添加 .x-list-bordered 设置边框。 添加 .x-list-striped 设置间隔色。

<ul class="x-list x-list-baseline x-list-bordered x-list-striped">
    <li><a href="###">1. TealLang</a></li>
    <li><a href="###">2. TealUI</a></li>
    <li><a href="###">3. TealEditor</a></li>
</ul>

文本

添加 .x-list-ellipsis 可以让列表项超限后显示省略号。

<ul class="x-list x-list-ellipsis">
    <li><a href="###">1. TealLang</a></li>
    <li><a href="###">2. TealUI</a></li>
    <li><a href="###">3. TealEditor</a></li>
</ul>

水平列表

水平列表主要用于网页布局时经典的 <li> 横向布局效果。 添加 .x-list-h 即可生成浮动水平列表。 添加 .x-list-space 为项之间添加间隙。

<ul class="x-list x-list-h x-list-space">
    <li><a href="###">A</a></li>
    <li><a href="###">B</a></li>
    <li><a href="###">C</a></li>
</ul>

菜单列表

添加 .x-list-menu 实现链接组成的列表，可以作为导航使用。

<ul class="x-list x-list-baseline x-list-bordered x-list-menu">
    <li><a href="###">A. 10</a></li>
    <li><a href="###">B. 20</a></li>
    <li class="x-list-selected"><a href="###">C. 30<span class="x-badge">44</span></a></li>
    <li><a href="###">D. 40<span class="x-badge">34</span></a></li>
</ul>
<ul class="x-list x-list-baseline x-list-bordered x-list-menu">
    <li>
        <a href="###">
            <small class="x-right">10 分钟前</small>
            <h4>列表头</h4>
            <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
            <small>作者</small>
        </a>
    </li>
    <li>
        <a href="###">
            <small class="x-right">10 分钟前</small>
            <h4>列表头</h4>
            <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
            <small>作者</small>
        </a>
    </li>
    <li>
        <a href="###">
            <small class="x-right">10 分钟前</small>
            <h4>列表头</h4>
            <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
            <small>作者</small>
        </a>
    </li>
</ul>