Alternatives à la < br > illégale ou < p > dans < li > balises en vol stationnaire?

Question

Quelqu'un vous a-t-il suggéré de créer des espaces de ligne de type paragraphe dans une balise < li > incluant une pseudo-classe flottante?

J'ai un < span > qui apparaît sur a: hover et je souhaite que le texte qui apparaît soit divisé en 2 paragraphes. Cela fonctionne avec < br > en FF mais je veux faire la bonne chose (maintenant que j'ai découvert que c'est faux!) ...

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

Votre problème peut provenir du fait que vous utilisez un < span > tag incorrectement.

Les étendues sont supposées être des éléments en ligne et vous les appelez comme s'il s'agissait d'un élément de bloc. Certes, vous pouvez forcer une étendue à se comporter comme un élément de bloc en ajoutant le bon style, mais cela peut ne pas toujours être respecté par les différents navigateurs.

Idéalement, vous devriez utiliser un div à la place. Vous pouvez ensuite utiliser soit les balises p, soit d’autres balises div pour indiquer les paragraphes (idéalement p, car ce sont sémantiquement des paragraphes plutôt que des blocs de texte non apparentés).

Answer 2

Euh, rien de mal à avoir < br > dans < un > ou < span > . Il est parfaitement valide selon la spécification HTML 4.01 .

Modifier: < li > peut contenir < p > , < br > et à peu près tout le reste.

La spécification est un peu difficile à lire mais dit en gros:

• LI peut contenir un bloc ou en ligne
Le bloc
• est constitué de P + d'autres éléments
• inline est composé de spécial + d'autres éléments
• spécial est composé de A + BR + d'autres éléments

En ce qui concerne < a > , il est indiqué:

• Un peut contenir en ligne sauf A
• inline ... voir ci-dessus

Answer 3

Vous pouvez y placer une autre plage en tant que "faux". balise 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>

Et dans votre css:

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

Notez que tout ce que vous déclarez pour #rightlist span s'appliquera à #rightlist span . Vous devrez donc peut-être remplacer certaines règles. dans #rightlist span span .

Answer 4

Pourquoi est-ce «faux»?

votre balise br devrait peut-être être codée comme suit:

 <br />

Answer 5

Pourquoi votre voie actuelle est-elle fausse?

Vous pouvez essayer ceci

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