Alternativas al ilegal < br > o < p > dentro de < li > etiquetas en un vuelo estacionario?

Question

¿Alguien tiene una sugerencia para crear espacios de línea de tipo párrafo dentro de una etiqueta < li > que incluye una pseudo-clase emergente suspendida?

Tengo un < span > que aparece en a: hover y quiero que el texto que aparece se divida en 2 párrafos. Funciona con < br > en FF pero quiero hacer lo correcto (¡ahora que he descubierto que está mal!) ...

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

Su problema puede surgir del hecho de que está utilizando un < span > etiqueta incorrectamente

Se supone que los tramos son elementos en línea y lo está estilizando como si fuera un elemento de bloque. Es cierto que puede forzar un lapso para que se comporte como un elemento de bloque agregando el estilo correcto, pero esto no siempre es respetado por los distintos navegadores disponibles.

Idealmente, deberías usar un div en su lugar. Luego puede usar etiquetas p o etiquetas div adicionales para indicar los párrafos (idealmente p, ya que semánticamente en realidad son párrafos en lugar de bloques de texto no relacionados).

Answer 2

Err, no hay nada de malo en tener < br > dentro de < a > o < span > . Es perfectamente válido de acuerdo a la especificación HTML 4.01 .

Editar: < li > puede contener < p > , < br > y prácticamente cualquier otra cosa.

La especificación es un poco difícil de leer pero básicamente dice:

• LI puede contener block o inline
• block está hecho de P + algunas otras cosas
• inline está hecho de especial + algunas otras cosas
• especial está hecho de A + BR + algunas otras cosas

Con respecto a < a > dice:

• A puede contener en línea excepto A
• en línea ... ver arriba

Answer 3

Podrías pegar otro lapso allí como un "falso" etiqueta 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>

Y en tu css:

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

Nota cualquier cosa que declare para #rightlist span se aplicará a #rightlist span span , por lo que es posible que deba anular algunas de las reglas en #rightlist span span .

Answer 4

¿Por qué es 'incorrecto'?

su etiqueta br quizás debería codificarse como:

 <br />

Answer 5

¿Por qué está mal tu camino actual?

Puedes probar esto

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