違法＆lt; br＆gt;の代替または＆lt; p＆gt; ＆lt; li＆gt;内ホバーのタグ？

StackOverflow https://stackoverflow.com/questions/427721

質問

ホバーされたポップアップ擬似クラスを含む＆lt; li＆gt; タグ内に段落タイプの行スペースを作成する提案はありますか？

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

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 ;
}
役に立ちましたか？

解決

＆lt; span＆gt;を使用しているという事実から問題が発生する場合があります。タグが正しくありません。

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

理想的には、代わりにdivを使用する必要があります。その後、pタグまたはさらにdivタグを使用して、段落を示すことができます（意味的には、意味のないテキストのブロックではなく、実際には段落であるため、p）。

他のヒント

エラー＆lt; br＆gt; を＆lt; a＆gt; または＆lt; span＆gt; の中に入れても問題はありません。 HTML 4.01仕様に従って完全に有効です。

>

編集：＆lt; li＆gt; には、＆lt; p＆gt; 、＆lt; br＆gt; などを含めることができます。

仕様は読みにくいですが、基本的に次のように書かれています：

  • LI には、 block または inline
    • を含めることができます
  • block は、 P +その他のもので構成されています
  • inline は、 special +その他のもので構成されています
  • special は A + BR +その他のもので構成されています

＆lt; a＆gt; については次のように書かれています：

  • A には、 A
    • を除く inline を含めることができます
  • inline ...上記を参照

「偽物」として別のスパンを挿入できます。 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 で。

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

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

 <br />

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

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

<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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top