echo-labels
.echo-label
を繰り返すための領域を作成する。
ヘッダを含む場合は定義リスト dl > dt, dd
を使用する。含まない場合はリスト ul > li
でマークアップすること。
Internet Explorer 11のラベル・ナビゲーションの不具合について
ヘッダがある場合
ヘッダがない場合
<p class="echo-title echo-title-level-4 echo-title-style-a echo-margin-bottom-sm">ヘッダがある場合</p>
<nav class="echo-labels">
<dl class="echo-labels-list">
<dt class="echo-labels-header">タグ</dt>
<dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">ラベル</a></dd>
<dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">テキストが長いラベル</a></dd>
<dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">ラベル</a></dd>
<dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">テキストがとても長いラベル</a></dd>
<dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">ラベル</a></dd>
<dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">ラベル</a></dd>
</dl><!-- /.echo-labels-list -->
</nav><!-- /.echo-labels -->
<p class="echo-title echo-title-level-4 echo-title-style-a echo-margin-top-lg echo-margin-bottom-sm">ヘッダがない場合</p>
<nav class="echo-labels">
<ul class="echo-labels-list">
<li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">ラベル</a></li>
<li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">テキストが長いラベル</a></li>
<li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">ラベル</a></li>
<li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">テキストがとても長いラベル</a></li>
<li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">ラベル</a></li>
<li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">ラベル</a></li>
</ul><!-- /.echo-labels-list -->
</nav><!-- /.echo-labels -->