2

他の Web サイトへのリンクをリストしているページがあります。各リンクの後には、リンク先のサイトの簡単な説明が続きます。リンク テキストを説明より少し大きくしたいので、CSS クラス定義 a.link を追加し、font-size を 16px と定義しました。完全なリストは標準<p>タグ内にあり<hr>、各リスト項目の間にタグがあります。問題は、リストの最初のリンクだけが新しいフォント サイズを取得することです。最初のリンク以降の各リンクは、リンク クラス定義だけでなく、<p>タグでも定義されているすべてのスタイルを失います。タグを削除する<hr>と、リスト内のすべてのアイテムが正しくスタイル設定されます。タグ内のリスト内の各リンクをラップする<p>と、それらも正しくスタイル設定されますが、可能であれば余分なタグでリストを混乱させたくありません

これが私のスタイルシートコードです:

#pane {
    float: right;
    width: 800px;
}

#pane p {
    margin-left: 15px;
    font-family: verdana;
    font-size: 12px;
}

#pane p a.link { font-size: 16px; }

生成された HTML のサンプルを次に示します。

<div id="pane">
<p>
    <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    <hr>
    <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
    <hr>
</p>
</div>

他の誰かがこの動作に遭遇し、<p>どこにでもタグを追加して修正する方法を見つけましたか?

4

6 に答える 6

2

段落としてラップする必要がありますか? そうでない場合は、そのタグを失う可能性があり、混乱することなく機能します。http://jsfiddle.net/bqhC9/

<div id="pane">
    <p>
        <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    </p>
        <hr>
    <p>    
        <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
    </p>    
        <hr>

    </div>
于 2012-09-26T00:38:24.403 に答える
2

<hr>タグの中に入れることはできません<p>。修正しようとすると、ブラウザが<p>タグを閉じて自動的に修正します。2 番目のリンクは<p>要素内にないため、CSS ルールは適用されなくなります。

これは、ブラウザーがコードを修正するものであり、CSS クラスが適用されなくなった理由です。

<div id="pane">
<p>
    <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    </p><hr>
    <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff

<p></p>
</div>
于 2012-09-26T00:40:42.637 に答える
1

リンクのコレクションは、ULおそらくNAV.

HR内部が検証Pされないため（そして正当な理由で）、問題が発生します。確認するために、次のサンプルを使用しました。

<!doctype html>
<html>
<head>
    <title>Test</title>
</head>
<body>
<div id="pane">
<p>
    <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    <hr>
    <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
    <hr>
</p>
</div>
</body>
</html>

p 要素の直後に ...HR... が続く場合、p 要素の終了タグは省略できます。

ソース: http://www.w3.org/TR/html-markup/p.html#p

@Billが指摘したように、これにより、予期Pしないときにパーサーが閉じます。

は、段落内では意味的に無効なテーマのHR 区切りを表します。論理的に (少なくとも英語では) 段落には、単一のテーマに関する関連する考えのコレクションが含まれているはずなので、これは理にかなっています。

于 2012-09-26T00:41:54.163 に答える
1

hr は p タグでは使用できません。pタグをdivに変更できます

    <!doctype html>
<html>
<head>
<style>
#pane {
float: right;
width: 800px;
}

#pane div {
  margin-left: 15px;
  font-family: verdana;
  font-size: 12px;
}

#pane div a.large    { font-size: 26px; }
</style>
</head>
<body>
<div id="pane">
<div>
    <a href="http://www.google.com" class="large">Google</a> - For finding stuff
    <hr/>
    <a href="http://www.newegg.com" class="large">Newegg</a> - For buying stuff
    <hr/>
</div>
</div>
</body>
</html>
于 2012-09-26T00:45:52.053 に答える
1

の良い答え を<p>, <hr> 使用しない方がよいでしょう<p>。

囲んでいるタグと同じようにタグを表示する をスタイルしa.linkます。display:block<p>

また、あなたの<hr/>

次に、css セレクターを修正します#pane > a.link。実際にそのように選択する必要がある場合。a.link必要に応じて後で別のセレクターで上書きでき、特異性の問題が発生しないように、スタイルを単独で設定することをお勧めします。

于 2012-09-26T01:37:40.483 に答える
0

HR タグに問題があると思います。XHTML では、タグを閉じる必要があります。したがって、HRは次のようになります<hr/>

    <div id="pane">
<p>
    <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    <hr/>
    <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
    <hr/>
</p>
</div>

それが機能するよりも、そうしない理由はありません。

于 2012-09-26T00:43:46.720 に答える