2011-12-16 5 views
1

Я использую HTML Tidy для вывода довольно HTML-источника и в качестве окончательной проверки кодировки.Предотвращение HTML Уточнение добавления элементов li

Однако это занимает очень простой список, таких как:

<ul id="navigation"> 
      <a href="index.php"><li>Summary</li></a> 
      <a href="#"><li>Upload</li></a> 
      <a href="accounts.php"><li>Accounts</li></a> 
     </ul> 

и преобразования его в этом уродства:

<ul id="navigation"> 
     <li style="list-style: none"> 
      <a href="index.php"></a> 
     </li> 
     <li id="active">Summary 
     </li> 

     <li style="list-style: none"> 
      <a href="#"></a> 
     </li> 
     <li>Upload 
     </li> 
     <li style="list-style: none"> 
      <a href="accounts.php"></a> 
     </li> 
     <li>Accounts 
     </li> 

     </ul> 

Как изящно сказать ему, чтобы оставить свой список в одиночку?

Я искал их configuration options, однако часто обнаружил, что они не называются интуитивно или не объяснены должным образом.

ответ

1

Единственный ответ: дать ему правильный код, чтобы начать с. Единственный законный дочерний элемент ul - это li. Элемент a не может быть ребенком ul.

<ul id="navigation"> 
    <li><a href="index.php">Summary</a></li> 
    <li><a href="#">Upload</a></li> 
    <li><a href="accounts.php">Accounts</a></li> 
</ul> 

Если вы хотите, чтобы весь li быть интерактивными, стиль a элемент, как display: block:

#navigation li a { 
    display: block; 
} 
2

На самом деле вы пытаетесь исправить свою разметку, чтобы соответствовать ее стандартам, ваши теги <li> должны быть в тегах <a>, а не наоборот, может быть, если вы исправите это, то он не будет пытаться добавить дополнительные элементы к списку.

Вы можете удалить часть стиля, хотя, просто изменить ваш CSS, чтобы иметь:

ul.navigation li 
{ 
    list-style: none; 
} 
+0

Пятно на ... аккуратный код просто пытается сделать так, как это должно быть. –

+0

Я понимаю это, но я не беспокоюсь о проверке с этим файлом, я просто хочу, чтобы сделать все клики доступными для меня, и я не столкнулся с браузером, который не может это сделать. Также я уже объявляю 'list-style: none;' в моем css –

+0

Браузеры могут отображать его, потому что они пытаются справиться с плохой разметкой. Если вам нужно, чтобы ссылки были сплошными, вы могли бы установить их для использования 'display: inline-block', который должен делать то, что вы хотите, если я правильно понимаю. –

0

переместить <a> тегов в <li> -s:

<li><a href="index.php">Summary</a></li> 
1

Ваш список недействительная разметка; элемент ul может содержать только элементы li. Tidy на самом деле применяет наиболее разумный общий подход к фиксации такой сломанной разметки: он превращает любой контент без li в элемент li, для которого подавляется список.

Так вручную изменить разметку, как

<a href="index.php"><li>Summary</li></a> 

в

<li><a href="index.php">Summary</a></li> 

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

Смежные вопросы