CODEWITHSUNDEEP
htmlcsshtml-tablehtml-lists
Big_Mac
Big_Mac

Reputation: 3034

How to align ordered list item table to number?

I have an ordered list of tables that contain 1 row and 2 columns using the code below.

I am trying to get the first line of the table paragraph to align to the number similar to normal list items. For some reason it is not aligning and the number is showing at the bottom.

How can I 1. align the table row paragraphs to the number similar to the first item and 2. align the "56 citations" paragraph to the other td in the table.

Thanks!

<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

Upvotes: 3

Views: 406

Answers (1)

VorganHaze
VorganHaze

Reputation: 2066

Use vertical-align: baseline in the td element, like this:

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>

Upvotes: 1

Related Questions