Альтернативы незаконному <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

Ваша проблема может возникнуть из-за того, что вы неправильно используете <span> тег.

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

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

Answer 2

Эээ, нет ничего плохого в том, чтобы иметь <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 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>