如何解决在有序列表中显示表格的最佳做法
我正在尝试找到编码以下页面布局示例的最佳方法,该示例在有序列表中显示全角表格。通常,我可以作弊并使用两个项目符号列表,并且在它们之间有一个表,但是现在的要求是使用一个有序列表,并在表仍在列表项内时继续编号:
如您所见,H1下方的所有内容均以空白间距缩进,除了表格位于第二和第三列表项之间。
我的主要问题: 由于我们不能在 OL 之间放置 DIV 和 TABLE 和 LI 标记,在保持适当的HTML列表布局标准的同时,编写此布局的正确方法是什么?
我的错误代码:
<h2>Heading 2</h2>
<p></p>
<ol>
<li></li>
<li></li>
<div class="table-container">
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</div>
<li></li>
<li></li>
</ol>
谢谢!
解决方法
关闭列表的第一部分,放置表格,使用start="3"
开始新列表以恢复编号:
.table-container table {
border: 1px solid;
border-collapse: collapse;
width: 100%;
}
.table-container table td {
border: 1px solid;
}
<h2>Heading 2</h2>
<p>Lorem ipsum</p>
<ol>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
<div class="table-container">
<table width="100%">
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</table>
</div>
<ol start="3">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。