关于css：HTML中不同字体大小的左/右对齐


Left/Right Alignment with Different Font Sizes in HTML

本问题已经有最佳答案，请猛点这里访问。

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

1
2
3
4
5
6
7
8
9
10
.right {
  float: right;
  display: inline
}

.left {
  float: left;
  font-size: 300%;
  display: inline
}
1
2
<span class="left">Left Alignment</span>
<span class="right"> Right Alignment</span>

我希望两个跨距按文本底部对齐。有人能帮我吗？

谢谢！

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

1
2
3
4
5
6
7
8
9
10
div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px;
}

.left{
    font-size: 300%;
}
1
2
<span class="left">Left Alignment</span>
<span class="right"> Right Alignment</span>

flexbox可以做到……但它需要一个包装器元素。

1
2
3
4
5
6
7
8
9
10
11
12
.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;
}
1
2
  <span class="left">Left Alignment</span>
  <span class="right"> Right Alignment</span>