weui/src/example/steps/steps_horizonal.html

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

<div class="page">
  <ul class="weui-steps weui-steps_horizonal">
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
  </ul>
  <ul class="weui-steps weui-steps_horizonal">
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
  </ul>
  <ul class="weui-steps weui-steps_horizonal">
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
  </ul>
  <ul class="weui-steps weui-steps_horizonal">
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner" style="display: none;">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
  </ul>

  <ul class="weui-steps weui-steps_horizonal" style="display: none;">
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
  </ul>
  <ul class="weui-steps weui-steps_horizonal-primary" style="display: none;">
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
  </ul>
  <ul class="weui-steps weui-steps_horizonal-center" style="display: none;">
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item weui-steps__item_success">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
    <li class="weui-steps__item">
      <div class="weui-steps__item__inner">
        <strong class="weui-steps__item__title">标题</strong>
        <span class="weui-steps__item__desc">描述内容详情</span>
      </div>
    </li>
  </ul>
</div>