HTML中不同字体大小的左/右对齐[重复]

Posted 2023-03-05

【中文标题】HTML中不同字体大小的左/右对齐[重复]

【英文标题】：Left/Right Alignment with Different Font Sizes in HTML [duplicate]

【发布时间】：2018-10-07 07:43:27

【问题描述】：

我正在尝试在我的 html 中进行左右对齐。当字体大小相同时它可以正常工作，但当字体大小不同时它们不会对齐。

.right 
  float: right;
  display: inline


.left 
  float: left;
  font-size: 300%;
  display: inline

<span class="left">Left Alignment</span>
<span class="right"> Right Alignment</span>

我希望两个跨度与文本底部对齐。有人可以帮我解决这个问题吗？

谢谢！

【参考方案1】：

您可以将 flex-box 与 align-items:baseline; 属性一起使用

div
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px;


.left
    font-size: 300%;

<div>
<span class="left">Left Alignment</span>
<span class="right"> Right Alignment</span>
</div>

【参考方案2】：

Flexbox 可以做到这一点……但它需要一个包装元素。

.left 
  font-size: 300%;


div 
  width: 90%;
  margin: 1em auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid grey;

<div>
  <span class="left">Left Alignment</span>
  <span class="right"> Right Alignment</span>
</div>