HTML5镜像列表

Question

我想创建一个带有书名的书籍封面列表，作为指向书籍详细信息页面的菜单项。从视觉上看，应该是这样的：

+-----+ +-----+ +-----+ +-----+
|     | |     | |     | |     |
|     | |     | |     | |     |
|     | |     | |     | |     |
|     | |     | |     | |     |
+-----+ +-----+ +-----+ +-----+
Title 1 Title 2 Title 3 Title 4

+-----+ +-----+
|     | |     |
|     | |     |
|     | |     |
|     | |     |
+-----+ +-----+
Title 5 Title 6

我在寻找最整洁的html结构:我不知道我应该使用浮动数字元素，还是无序列表，或者其他什么。你有什么推荐的？

谢谢!

Answer 1

我会这样说：

<ul>
  <li>
    <figure>
      <img src="" alt="" />
      <figcaption>IMG title</figcaption>
    </figure>
  </li>
  <!-- more li's -->
</ul>

Answer 2

你自己回答自己的问题：

我想创建一个书籍封面的列表

;-)

无序列表是有意义的。您也可以简单地创建一个浮点型div的循环，或者甚至是figure。下面是规范对figure元素的描述：

figure元素表示一个内容单元，可选地带有标题，该单元是独立的，通常作为单个单元从文档的主流中引用，并且可以从文档的主流中移出，而不会影响文档的含义。

这取决于文档的整体结构，以及元素所起的作用。