1

私が取り組んでいるプロジェクトの次のフッターがあります。

<footer>
  License: <a href="#">Creative Commons BY</a>
  Email: <a href="mailto:#">email@mail.com</a>
  Telephone: <a href="tel:#">0123456789</a>
</footer>

このフッターでは、各リンク (およびそのプレフィックス) を別の行に表示し、不要なマークアップを追加せずに、可能な限り意味的に有効にしたいと考えています。

私はすでに検討しました：

  • タグですが、詩の<br>セマンティックとのみ見なされます (または、改行が情報の固有の部分である同様のコンテンツであるため、それを使用して行を分割することはできません (この質問を参照してください: <br> タグのセマンティックな代替使用法)

  • を使用しますulが、実際にはリストではないため、でラップすることulも実際には有効なオプションではありません。

  • 固定幅を使用していますが、動的な解決策を見つけたいと思っています。

  • 各行を で囲んでいますが<p>、これは少しやり過ぎに思えます。これは、実際には段落ではなく、単一の行をラップしているためです。

余分なマークアップを追加せずに、意味的に適切な方法でこれらの行を分割する最良の方法は何でしょうか?

4

6 に答える 6

7

私はそれをリストとして見ています。そして、<ul>タグが適切になる可能性があります。

おそらく、それを定義のリスト<dl><dt>として表示する方が適切です。

例：

<dl>
    <dt>License:</dt>
    <dd><a href="#">Creative Commons BY</a></dd>
    etc.
</dl>

別の行に表示するには、dts を に設定しfloat:leftます。

于 2013-04-11T10:22:25.230 に答える
3

[...]余分なマークアップを追加せずに、意味的に賢明な方法ですか?

できるとは思えません。個人的には、これには定義リストを使用します。

<dl>
    <dt>License:</dt>
    <dd><a href="#">Creative Commons BY</a></dd>
    <dt>Email:</dt>
    <dd><a href="mailto:#">email@mail.com</a></dd>
    <dt>Telephone:</dt>
    <dd><a href="tel:#">0123456789</a></dd>
</dl>

それらを 3 本の線として表示するには、たとえば、DT 要素を左にフロートさせることができます。

dt {
    float: left;
    margin-right: 4px;
}

http://jsfiddle.net/2nbfg/のデモ

これのプラス面は、後でスタイルを設定するときに、より多くの柔軟性が得られることです. 別のスタイリング方法については、http://jsfiddle.net/2nbfg/1/を参照してください。

詳細については、 http://www.maxdesign.com.au/articles/definition/を参照してください。

于 2013-04-11T10:27:30.263 に答える
2

セマンティックについて <address>言えば、提供された連絡先情報がドキュメントに関連している場合、これは良いユースケースになる可能性があります (ライセンス情報が含まれているので、私は推測するかもしれません1 ): http://html5doctor.com/the-address-elementを参照してください。 /それについてのさらなる参照のために。

(そうでない場合、html5doctor の同じページは、必要な場所を使用して、 hcard マイクロフォーマット<br>で単純に段落を使用することを提案しています)

したがって、最初のシナリオでは、

<footer>
    <p>
       License: <a href="#" rel="license">Creative Commons BY</a>
    </p>
    <address>
        Email: <a href="mailto:#">email@mail.com</a>
        Telephone: <a href="tel:#">0123456789</a>
    </address>
</footer>

と

footer p { margin: 0; }

footer address {
   font-style: normal; /* just because of default browser style */
}

footer address a:after {
  content: "";
  display: block;
}

jsbin の例を参照してください: http://jsbin.com/ajohur/1/edit

(1) 編集— @unor が指摘したように、情報ライセンスはおそらくaddress要素の外にあるはずなので、段落で囲みました。

于 2013-04-11T10:27:50.350 に答える
-2

CSS を使用すると、おそらくこの問題を解決できます。

footer > a:before{
  content: "<br/>"
}
于 2013-04-11T10:22:44.337 に答える