Бутстрап и разметка Microdata для панировки? пространства Issue-экстра

Question

Это то, что разметка Twitter Bootstrap для навигационной цепочке выглядит следующим образом:

<ol class="breadcrumb"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Library</a></li> 
    <li class="active">Data</li> 
</ol> 

Объединение Twitter Bootstrap и Microdata разметку, чтобы сделать панировочные сухари дружественной поисковой системе:

<ol class="breadcrumb"> 
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="#" itemprop="url"> 
      <span itemprop="title">Home</span> 
     </a> 
    </li> 
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="#" itemprop="url"> 
      <span itemprop="title">Library</span> 
     </a> 
    </li> 
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="#" itemprop="url"> 
      <span itemprop="title">Data</span> 
     </a> 
    </li> 
</ol> 

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

Here's the related JS Fiddle for the same.

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

PS: Обе наклейки добавляют пространство перед каждой ссылкой в ​​сухарях.

Answer 1

Эти пространства создаются разрывами строк в HTML.

Похожие вопросы:

• About the space and line-break in HTML source code
• Why does the browser renders a newline as space?

Answer 2

Ребенок Атрибут должен быть включен во второй и последующих элементов списка, согласно описанию сухарях на Data-Vocabulary.org и в деталях на Google Rich snippets - Breadcrumbs

<ol> gives me style issues in Orchard CMS front end I use <ul> or use <div>, как в примере Google.

Всегда закрывайте предметы, как itemscope = "itemscope".

<ul> 
    <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="#" itemprop="url"> 
      <span itemprop="title">Home</span> 
     </a> 
    </li> 
    <li itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="#" itemprop="url"> 
      <span itemprop="title">Library</span> 
     </a> 
    </li> 
    <li itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="#" itemprop="url"> 
      <span itemprop="title">Data</span> 
     </a> 
    </li> 
</ul>