Может ли список быть нумерованным? Список может состоять из нескольких элементов?

Question

Не могу найти ответ на этот вопрос, но мне нужно разрешить поисковым системам читать нумерованный список. Однако шаги охватывают несколько элементов div (все со своими собственными изображениями и т. Д. c), и, не переписывая код (например, изменяя элементы div), я подумал, можно ли позволить поисковым системам понять список. Я могу добавить контент в divs и c, не портя макет, например, li, но li будет в нескольких div, и я не уверен, что bing / google может понять, если 1,2,3 не все внутри одного и того же ol

Например, если бы у меня было

<div>
    <div>
        <h3>step 1</h3>
    </div>
    <div>
        <p>step 1 text</p>
    </div>
    <div>
    <img src="Step 1 image.jpg" />
    </div>
</div>
<div>
    <div>
        <h3>step 2</h3>
    </div>
    <div>
        <p>step 2 text</p>
    </div>
    <div>
    <img src="Step 2 image.jpg" />
    </div>
</div>
<div>
    <div>
        <h3>step 3</h3>
    </div>
    <div>
        <p>step 3 text</p>
    </div>
    <div>
    <img src="Step 3 image.jpg" />
    </div>
</div>

, мог бы я заставить поисковую систему понимать его как нумерованный список?

Answer 1

Да, Bing / Google, вероятно, увидели бы отдельные теги li внутри тега различных элементов как элементы из разных списков!

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

ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

<ol>

  <li>
    <div>
        <div>
            <h3>step 1</h3>
        </div>
        <div>
            <p>step 1 text</p>
        </div>
        <div>
        <img src="Step 1 image.jpg" />
        </div>
    </div>
  </li>
  
  <li>
    <div>
        <div>
            <h3>step 2</h3>
        </div>
        <div>
            <p>step 2 text</p>
        </div>
        <div>
        <img src="Step 2 image.jpg" />
        </div>
    </div>
  </li>
  
  <li>
    <div>
        <div>
            <h3>step 3</h3>
        </div>
        <div>
            <p>step 3 text</p>
        </div>
        <div>
        <img src="Step 3 image.jpg" />
        </div>
    </div>
  </li>

</ol>

надеюсь, это поможет: :).

Answer 2

Вы можете использовать соответствующие css

div { 
    border   : 1px green solid; 
    /* use easyclearing on div (or this workaround) */
    overflow : auto; 
    height   : auto;
}

/* clear */
ul + * { clear: both; }

ul {
   float : left;
   height : 160px; /* (30 + 2px) * 5 */ 

   -webkit-transform : rotate(-90deg);
   -moz-transform : rotate(-90deg);
   -ms-transform : rotate(-90deg);
   -o-transform : rotate(-90deg);
   transform : rotate(-90deg);
}

li:nth-child(5n+1) { clear: right; }

li {
   width      : 30px;
   height     : 30px;  
   float      : right;
   margin     : 1px;
   background : #ccc;

   -webkit-transform-origin : 50% 50%;
   -moz-transform-origin : 50% 50%;
   -ms-transform-origin : 50% 50%;
   -o-transform-origin : 50% 50%;
   transform-origin : 50% 50%;

   -webkit-transform : rotate(90deg);
   -moz-transform : rotate(90deg);
   -ms-transform : rotate(90deg);
   -o-transform : rotate(90deg);
   transform : rotate(90deg);
}

Надеюсь, это поможет вам.