html - 如何将有序列表项表与数字对齐?
问题描述
我有一个使用下面的代码包含 1 行和 2 列的表的有序列表。
我试图让表格段落的第一行与类似于普通列表项的数字对齐。由于某种原因,它没有对齐,并且数字显示在底部。
我该如何 1. 将表格行段落与第一项类似的数字对齐 2. 将“56 引文”段落与表格中的另一个 td 对齐。
谢谢!
<ol>
<li>
<p>This is what a normal item</p>
<p>looks</p>
<p>like</p>
</li>
<li>
<table>
<tr>
<td>
<p>This is what a table item</p>
<p>looks</p>
<p>like</p>
</td>
<td>
<p>56 Citations</p>
</td>
</tr>
</table>
</li>
</ol>
解决方案
vertical-align: baseline
在td
元素中使用,如下所示:
td {
vertical-align: baseline;
}
<ol>
<li>
<p>This is what a normal item</p>
<p>looks</p>
<p>like</p>
</li>
<li>
<table>
<tr>
<td>
<p>This is what a table item</p>
<p>looks</p>
<p>like</p>
</td>
<td>
<p>56 Citations</p>
</td>
</tr>
</table>
</li>
</ol>
推荐阅读
- javascript - 如何禁用触摸按上的文本选择?
- java - 如何在 gridLayout 行中居中元素?
- sql - 使用 SQL 查询 Sharepoint 减速
- javascript - 当 addEventListener 第二次调用时,如何摆脱 addEventListener 中使用的旧值?
- javascript - 我已经在 html 下的 body 中链接了 JS 文件,这仍然是 Uncaught TypeError: Cannot read property 'addEventListener' of null
- c# - 稍后在执行中更改服务实现(在 Microsoft.Extensions.DependencyInjection 中)
- python - 加载到 BigQuery 时的重复数据删除
- python - 获取 TypeError:'str' 对象在迭代时间内不可调用
- r - 如何删除行值的“G1R”:R编程中的“NG1R”
- c - C 中的自定义信号处理程序(Alt+F4)