列表可以被编号的列表是否在多个div上？

Question

似乎无法找到答案，但是我需要允许搜索引擎读取编号列表。但是，这些步骤跨越了多个div（全部带有自己的图像等）并且没有重写代码（例如更改div），我想知道是否可以允许搜索引擎理解列表。我可以在divs等内部添加内容而不会弄乱布局，例如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

您可以使用相关的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);
}

希望对您有帮助。

Answer 2

是的，Bing / Google可能会将ol标记中的单独li标记视为来自不同列表的项目！

这就是我要做的，我将divs封装在唯一的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>

希望有帮助，：）。