Alternativen zu illegalen oder in innerhalb -Tags auf einen schweben?

Question

Hat jemand einen Vorschlag Absatz Typen Zeilenabstände für die Erstellung innerhalb eines <li> Tages, das eine hovered Pop-up-Pseudo-Klasse umfasst?

Ich habe eine <span>, die auf a:hover erscheint und ich möchte der Text, der in zwei Absätze gebrochen werden erscheint. Es arbeitet mit <br> in FF, aber ich mag das Richtige (jetzt, dass ich entdeckt habe, dass es falsch ist!) Tun ...

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 ;
}

Answer 1

Ihr Problem aus der Tatsache entsteht, dass Sie ein -Tag falsch verwenden.

Spans sollen Inline-Elemente sein und du bist Styling es, als ob es sich um ein Blockelement waren. Zwar können Sie eine Trumkraft als Blockelement verhalten, indem Sie den richtigen Stil hinzufügen, aber dies nicht immer von den verschiedenen Browsern da draußen geehrt werden.

Im Idealfall sollten Sie stattdessen ein div werden. Sie können dann entweder p-Tags oder weitere div-Tags verwenden, um die Absätze um anzuzeigen (idealerweise p, da semantisch tatsächlich sind sie Absätzen eher als unabhängige Textblöcke).

Answer 2

Err gibt es nichts falsch mit <br> innerhalb <a> oder <span> haben. Es ist durchaus möglich, nach der HTML 4.01-Spezifikation .

Edit:. <li> kann enthalten <p>, <br>, und so ziemlich alles andere

Die Spezifikation ist ein bisschen schwer zu lesen, aber im Grunde sagt:

• LI kann enthalten block oder inline
• block aus P + einige andere Dinge,
gemacht
• inline aus special + einige andere Dinge,
gemacht
• special ist aus A + BR + einige andere Dinge,

In Bezug auf <a> heißt es:

• A kann inline außer A enthalten
• inline ... siehe oben

Answer 3

Sie könnten eine andere Spanne bleiben dort als "fake" p-Tag:

  <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>

Und in Ihrem CSS:

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

Hinweis alles, was Sie für #rightlist span erklären gilt für #rightlist span span, so dass Sie einige der Regeln in #rightlist span span müssen möglicherweise außer Kraft zu setzen.

Answer 4

Warum ist es 'falsch'?

Ihr br-Tag vielleicht codiert werden soll:

 <br />

Answer 5

Warum ist Ihre aktuelle Art und Weise falsch?

Sie können versuchen, diese

<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>