微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何将有序列表项表与数字对齐?

如何解决如何将有序列表项表与数字对齐?

我有一个包含 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>

The rending of the html in Firefox

解决方法

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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。