javascript - 如何分别对齐两个跨度元素但在同一行

Question

我正在努力对齐两个 span 元素，它们应该出现在同一行中，但已分开，如下所示。我正在使用的代码如下。

如果我不使用float:right，则两个文本将在单行中相互连接。

如果我使用float:right;，它们不会在同一行中对齐，它们之间存在一些未对齐。

使用float:right;结果将是这样的

没有 float:right; 结果将是这样的

请给我建议

.clearSpan {
    color:  $alt-dark-blue;
    float: right;
    cursor: pointer;
    clear: both;
    font-size: 10px;
}

.saveSpan {
    color:  $alt-dark-blue;
	clear : both;
    cursor: pointer;
    font-size: 10px;
}

<div> 
   <span class="saveSpan" >Save as Default Filters</span>
   <span class="clearSpan" >Clear All Filters</span>
 </div>

Answer 1

你可以使用flexbox来实现

div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid grey
}
span {
  color: blue;
  cursor: pointer;
  font-size: 10px;
}

<div>
  <span class="saveSpan">Save as Default Filters</span>
  <span class="clearSpan">Clear All Filters</span>
</div>