1

したい：

  1. 一連のリンクをそれぞれ新しい行に表示する
  2. リンクの可変幅とテキスト ラッピング機能を維持する
  3. 各リンクのマウス ホバー領域を実際のコンテンツに制限する
  4. リンクをコンテンツ フロー内に保持する

私が考えることができる最善の解決策は

<div>
    <a href="">Text</a>
</div>
<div>
    <a href="">Text</a>
</div>

、しかし、非セマンティックを追加するのは好きではありません<div>。を使用してみa { float: left; clear: both }ましたが、コンテンツ フローからリンクが外れてしまいました。私の知る限り、のような疑似セレクターは使用できません:outer-wrapper。より良い解決策はありますか、それとも<div>ラッパーが最善の解決策ですか?

* を使おうと思ったのです<ul><li><a>が、1 ページに 1 つか 2 つのリンクしかありません。<ul><li><div><div>

4

3 に答える 3

3

これは主に意見に基づく哲学の問題であり、意味論的に曖昧な概念である「セマンティック マークアップ」をめぐる際限のない無駄な議論の源です。しかし、質問をより建設的なものに変えるために、どのマークアップを使用することが本当に重要なのかを尋ねます。非 CSS レンダリング、または支援ソフトウェアが使用されている場合、それは何を意味しますか?

この観点からulすると、黒丸を含むデフォルトのレンダリングが許容される場合は OK です。それ以外の場合は、 を使用するdivかbr、リンク間で使用してください。スタイリングだけで使用しようとしないでくださいa。リンクはデフォルトで一緒に実行され、セパレーターのないインライン テキストとして表示されます。

于 2013-06-14T16:28:35.303 に答える
1

オプションは次 のとおりです。 （コンテンツをラップするため）

  1. display:table、それらを積み重ねます。
  2. display:inline-blockまた、
  3. float:leftそれらを一直線に並べます。

<a>マークアップの場合、<nav>タグにラップできます。ロール属性を追加して、メインナビゲーションと区別するか、メインナビゲーション用にします。
http://www.w3.org/TR/wai-aria/roles#landmark_roles

注: nav が不要な場合は、フッターや段落など、他のタグを使用できます。詳細はこちら: http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element

ありがとう

于 2013-06-14T16:27:08.017 に答える
0

意味的に、ページに配置したいのはリンクのリストのようです。だからそれだけを使ってください。

ul > li > a { /*whatever you want*/ }

リストを でラップするnavことを検討するか、ulを完全に忘れて、

nav > a { display: block; }

divsまた、すべての s が非セマンティックだとは思わないでください。はい、特定の意味はありませんが、仕様では内容を表していると書かれています。の非常に優れた用途divは、同じテーマまたは機能を持つ要素をグループ化することです。あなたの場合、肥大化として機能することについては正しいので、div1つだけを含む はありません。adiv

于 2013-07-29T05:29:00.227 に答える