Alternative al illegale < br > oppure < p > all'interno di < li > tag su un passaggio del mouse?

Question

Qualcuno ha un suggerimento per la creazione di spazi di riga di tipo paragrafo all'interno di un tag < li > che include una pseudo-classe pop-up al passaggio del mouse?

Ho un < span > che compare su a: hover e voglio che il testo che appare sia suddiviso in 2 paragrafi. Funziona con < br > in FF ma voglio fare la cosa giusta (ora che ho scoperto che è sbagliato!) ...

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

Il tuo problema potrebbe derivare dal fatto che stai utilizzando un < span > tag errato.

Si suppone che gli span siano elementi incorporati e tu lo stili come se fosse un elemento a blocchi. È vero che puoi forzare un intervallo a comportarsi come un elemento a blocchi aggiungendo lo stile giusto, ma questo potrebbe non essere sempre onorato dai vari browser là fuori.

Idealmente dovresti usare un div. È quindi possibile utilizzare tag p o ulteriori tag div per indicare i paragrafi (idealmente p, poiché semanticamente in realtà sono paragrafi anziché blocchi di testo non correlati).

Answer 2

Err non c'è niente di sbagliato nell'avere < br > all'interno di < a > o < span > . È perfettamente valido secondo le specifiche HTML 4.01 .

Modifica: < li > può contenere < p > , < br > e praticamente qualsiasi altra cosa.

Le specifiche sono un po 'difficili da leggere ma sostanzialmente dicono:

• LI può contenere block o inline
• block è composto da P + alcune altre cose
• inline è composto da special + alcune altre cose
• special è costituito da A + BR + alcune altre cose

Riguardo a < a > dice:

• A può contenere inline tranne A
• inline ... vedi sopra

Answer 3

Potresti inserire un altro intervallo come "falso" tag 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>

E nel tuo CSS:

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

Nota tutto ciò che dichiari per #rightlist span verrà applicato a #rightlist span span , quindi potresti dover scavalcare alcune delle regole in #rightlist span span .

Answer 4

Perché è "Sbagliato"?

il tuo tag br dovrebbe forse essere codificato come:

 <br />

Answer 5

Perché la tua strada attuale è sbagliata?

Puoi provare

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