跳至主要内容

文档

描述列表

轻松创建美观的描述列表，提供不同的样式。

用法

添加 .uk-description-list 类以显示术语和描述相互位于下方。

<dl class="uk-description-list">
    <dt></dt>
    <dd></dd>
</dl>
  • 描述术语
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    描述术语
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    描述术语
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <dl class="uk-description-list">
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>

分隔符修饰符

添加 .uk-description-list-divider 类以在列表项之间添加一条水平线。

<dl class="uk-description-list uk-description-list-divider">
    <dt></dt>
    <dd></dd>
</dl>
  • 描述术语
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    描述术语
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    描述术语
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <dl class="uk-description-list uk-description-list-divider">
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>