9

<li>ホバーされたポップアップ疑似クラスを含むタグ内に段落タイプの行間を作成するための提案はありますか?

<span>ポップアップするテキストがありa:hover、ポップアップするテキストを 2 つの段落に分割します。FFで動作し<br>ますが、正しいことをしたいです（間違っていることがわかりました！）...

html:

<div id="rightlist">
  <ul>
      <li><a href="">List item
          <span>
             words words words that are "paragraph" 1 of List item
             <br><br>
             different words that make up "paragraph" 2 of List item
          </span></a></li>

CSS:

#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell; 
z-index: 100 ;
    float: right ;
}

#rightlist ul {
  text-align: left;
margin: 0;
   margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: black ;
}

#rightlist a 
{
    display: table-cell;
text-decoration: none; color: black; 
background: #7EBB11 ; 
}

/*appearance of the <a> item (but before the <span> tag) on hover*/
#rightlist a:hover {
color: white;
}

/*appearance of the spanned content within <a></a> tags when not hovered */
/* %%%%% important - keep position:absolute in this div %%%%% */
#rightlist a span {
display: none;
position: absolute ;
margin-left: -412px;
top: -10px; left: 10px; padding: 10px ;
z-index: 100;
width: 380px; height: 222px; 
color: white;  background-color: #7EBB11;
font: 0.75em Verdana, sans-serif; font-size: 13px ; color: black;
text-align: left;
}



/*appearance of spanned content within <a> tags when hovered*/
#rightlist a:hover span {
display: table-cell ;
}
4

5 に答える 5

19

orの<br>中にあることに問題はありません。HTML 4.01 仕様に従って完全に有効です。<a><span>

編集: 、、およびその他のほとんどすべてを<li>含めることができます。<p><br>

仕様は少し読みにくいですが、基本的には次のように述べています。

  • LIblockまたは含むことができますinline
  • blockP+その他のものでできている
  • inlinespecial+その他のものでできている
  • specialA+ BR+ 他のものでできている

それについては次の<a>ように述べています。

  • Aを含むことができinlineますA
  • inline... 上記を参照
于 2009-01-09T11:26:43.000 に答える
1

<span> タグを間違って使用していることが原因で問題が発生する場合があります。

スパンはインライン要素であると想定されており、ブロック要素であるかのようにスタイリングしています。確かに、適切なスタイルを追加することでスパンを強制的にブロック要素として動作させることができますが、これはさまざまなブラウザーで常に受け入れられるとは限りません。

理想的には、代わりに div を使用する必要があります。次に、p タグまたは追加の div タグを使用して、段落を示すことができます (意味的には、無関係なテキスト ブロックではなく、実際には段落であるため、p が理想的です)。

于 2009-01-09T11:39:52.303 に答える
1

「偽の」pタグとして別のスパンをそこに貼り付けることができます：

  <li><a href="">List item
      <span>
         <span>words words words that are "paragraph" 1 of List item</span>
         <span>different words that make up "paragraph" 2 of List item</span>
      </span></a></li>

そしてあなたのCSSで：

#rightlist span span {display:block;margin:...}

に対して宣言したものはすべて#rightlist spanに適用されることに注意#rightlist span spanしてください。そのため、 のルールの一部をオーバーライドする必要がある場合があります#rightlist span span。

于 2009-01-09T11:24:12.257 に答える
0

なぜ「間違っている」のですか？

br タグは次のようにコーディングする必要があります。 

 <br />
于 2009-01-09T11:42:07.363 に答える
-4

なぜあなたの現在のやり方は間違っているのですか？

これを試すことができます

<span>
  <p>words words words that are "paragraph" 1 of List item</p>
  <p>different words that make up "paragraph" 2 of List item</p>
</span>
于 2009-01-09T11:27:58.817 に答える