如何分别对齐两个span元素但在同一行

Question

我正在调整两个span元素应该存在于同一行但是已经分开，如下所示。我正在使用的代码如下。

如果我不使用float:right，则两个文本都是单行连接，并且相互连接。

如果我使用float:right;，则他们没有在同一行中对齐，他们之间存在一些错位。

float:right;结果将是

没有float:right;，结果将是此

请给我这个建议

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以{/ 1}}使用

flexbox

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

Answer 2

也许你可以这样做：

function toggleSection(group, show) {
  var sections = ["Info", "Specs"];
  var selector = sections.map(function(k) {
    return "." + group + k
  }).join();
  show ? $(selector).show() : $(selector).hide();
}

或

.clearSpan {
    margin-left: 15px;
}

那应该把它分开。

Answer 3

您需要为span标记定义样式，

span {
   display: inline-block;
}