HTML 水平對齊內聯塊？

Question

在下面的 HTML 中，我希望美國的“U”與加拿大的“C”和墨西哥的“M”垂直對齊（在當前代碼中完成）。 同時，我希望“2015-2016”與“USA”水平對齊，而不是現在“USA”和“Canada”的中心。 我能做什么？

 span { display: inline-block; vertical-align: top; }

 <table> <tr> <td>2015-2016</td> <td><span>USA<br>Canada</span></td> </tr> <tr> <td>2014</td> <td>Mexico</td> </tr> </table>

Answer 1

應用vertical-align: top; 到所有表格單元格：

（注意：您不需要跨度的inline-block ，或者實際上，您根本不需要span來實現您想要實現的目標）

 td { vertical-align: top; }

 <table> <tr> <td>2015-2016</td> <td>USA<br>Canada</td> </tr> <tr> <td>2014</td> <td>Mexico</td> </tr> </table>