Альтернативы нелегальным <br>или <p>в тегах <li>при наведении курсора?

Question

Есть ли у кого-нибудь предложения по созданию пробелов типа абзаца внутри тега <li>, включающего всплывающий псевдокласс?

У меня есть <span>, который всплывает на a:hover, и я хочу, чтобы всплывающий текст был разбит на 2 абзаца. Он работает с <br> в FF, но я хочу поступить правильно (теперь, когда я обнаружил, что это неправильно!) ...

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

Ошибка, нет ничего плохого в том, что <br> внутри <a> или <span>. Это совершенно верно в соответствии с спецификацией HTML 4.01 .

Редактировать: <li> может содержать <p>, <br> и почти все остальное.

Спецификация немного сложна для чтения, но в основном говорит:

• LI может содержать block или inline
• block состоит из P + некоторых других вещей
• inline состоит из special + некоторых других вещей
• special состоит из A + BR + некоторых других вещей

Относительно <a> сказано:

• A может содержать inline, за исключением A
• inline ... см. Выше

Answer 2

Ваша проблема может возникнуть из-за неправильного использования тега .

Пролеты должны быть встроенными элементами, и вы оформляете их так, как если бы это был блочный элемент. По общему признанию, вы можете заставить span вести себя как элемент блока, добавив правильный стиль, но это не всегда учитывается различными браузерами.

В идеале вы должны вместо этого использовать div. Затем вы можете использовать либо теги p, либо дополнительные теги div для обозначения абзацев (в идеале p, поскольку семантически они фактически являются абзацами, а не несвязанными блоками текста).

Answer 3

Вы можете вставить туда другой промежуток как «фальшивый» тег 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.

Answer 4

Почему это «неправильно»?

Ваш BR-тег, возможно, должен быть закодирован как:

 <br />

Answer 5

Почему ваш текущий путь не так?

Вы можете попробовать это

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